/* ============================================================================
   UNDER THE HOOD — Office page. After the Stripe homepage "platform" graphic.

   Stripe renders that dashboard entirely in the browser from a string table
   (the saved page holds only an empty wrapper and the strings), plays it ONCE
   when it scrolls in, then shows a replay button. Kept all three: a fixed
   1120x560 stage, one play on arrival, replay on request. The labels change
   meaning: Stripe's cards carry an embed call, these carry the plain file the
   panel really reads (checked against platform/server.js).
   Builder-safe: no keyframes (they are the HOOD block in css/motion.css),
   classes only, px on the stage. Resting state is the finished frame.
   ========================================================================== */

.cx{--s:1;position:relative;max-width:100%;width:calc(1120px * var(--s));height:calc(560px * var(--s));margin:34px auto 0}
.cx-stage{position:absolute;left:0;top:0;width:1120px;height:560px;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))}
.cx-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
/* JS plays it on arrival, so hold the parts back until then; without JS the
   rule never matches and the finished frame shows */
.js .cx:not(.go) .cx-win,.js .cx:not(.go) .cx-co{opacity:0}

/* ---- the browser: the Office Overview as it looks in the product ----------
   Light sidebar (logo, workspace picker, search, the three nav groups with their
   counts), a breadcrumb bar with the two actions, then the greeting and four
   regions. Each region is what one callout names. */
.cx-win{position:absolute;left:170px;top:40px;width:800px;height:620px;border-radius:8px;overflow:hidden;background:#fafbfc;border:1px solid rgba(255,255,255,.6);
  /* glass frame, as on the other dashboards; 17px here because .cx-in shows it 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 34px 70px -30px rgba(2,37,79,.45)}
.cx-bar{position:absolute;left:0;top:0;width:100%;height:36px;display:flex;align-items:center;justify-content:center;
  background:#f3f5f8;border-bottom:1px solid var(--line)}
.cx-dots{position:absolute;left:14px;top:13px;display:flex;gap:6px}
.cx-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#dbe3ed}
.cx-url{display:flex;align-items:center;gap:6px;width:300px;height:22px;justify-content:center;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--mute)}

.cx-side{position:absolute;left:0;top:36px;bottom:0;width:188px;padding:14px 12px;background:#fff;border-right:1px solid #e6edf5;
  display:flex;flex-direction:column;gap:1px}
.cx-mark{display:block;height:19px;margin:0 6px 12px;background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain}
.cx-ws{position:relative;display:block;margin-bottom:8px;padding:7px 10px;border:1px solid #e1e8f1;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink)}
.cx-ws::after{content:"";position:absolute;right:11px;top:11px;width:5px;height:5px;border:solid #46556b;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.cx-find{position:relative;display:flex;align-items:center;margin-bottom:8px;padding:6px 8px 6px 28px;border:1px solid #e1e8f1;border-radius:6px;background:#f7f9fc;font-size:12px;color:var(--t4)}
.cx-find::before{content:"";position:absolute;left:10px;top:9px;width:8px;height:8px;border:1.5px solid #8793a6;border-radius:50%}
.cx-find::after{content:"";position:absolute;left:18px;top:18px;width:4px;height:1.5px;background:#8793a6;transform:rotate(45deg)}
.cx-find em{margin-left:auto;padding:1px 5px;border:1px solid #e1e8f1;border-radius:4px;background:#fff;font-style:normal;font-size:10px;color:#46556b}
.cx-grp{display:block;margin:10px 0 3px;padding:0 10px;font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#6b778a}
.cx-nav{display:flex;align-items:center;gap:10px;height:27px;padding:0 10px;border-radius:6px;font-size:12.5px;color:#1c2636}
.cx-nav img{filter:grayscale(1) brightness(.5);opacity:.85}
.cx-nav em{margin-left:auto;font-style:normal;font-size:11.5px;color:#46556b}
.cx-nav.on{background:#eaf0f8;color:#040d1c;font-weight:500}
.cx-nav.on img{filter:none;opacity:1}
.cx-nav em.cx-red{color:#e5484d}   /* the Inbox count is the app's red badge */

.cx-top{position:absolute;left:188px;right:0;top:36px;height:46px;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid #e6edf5}
.cx-crumb{margin-right:auto;font-size:13px;color:#6b778a}
.cx-crumb b{margin-left:4px;font-weight:500;color:var(--navy)}
.cx-tb{padding:5px 11px;border:1px solid #e1e8f1;border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:var(--ink)}
.cx-tb.cx-tp{border-color:var(--blue);background:var(--blue);color:#fff}
.cx-hi{position:absolute;left:208px;top:96px;display:flex;flex-direction:column;gap:3px;font:600 22px/1.15 var(--display);color:#0b1220}
.cx-hi small{font:400 12.5px var(--ui);color:#3d4a5c}

/* ---- the four regions: a section header, then white cards ------------------ */
.cx-rg{position:absolute;display:flex;flex-direction:column;gap:8px;border-radius:8px}
.cx-rg em{font-style:normal}
.cx-sh{display:flex;align-items:baseline;gap:8px}
.cx-sh b{font-size:14px;font-weight:600;color:var(--navy)}
.cx-sh small{font-size:12px;color:#46556b}
.cx-sh em{margin-left:auto;font-size:12px;color:var(--blue)}
.cx-r1{left:208px;top:152px;width:572px}
.cx-row{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border:1px solid #e4ecf5;border-radius:6px;background:#fff;font-size:13px;font-weight:500;color:var(--ink)}
.cx-ring{flex:0 0 auto;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #f59e0b inset}
.cx-row small{margin-left:auto;font-size:12.5px;font-weight:400;color:#46556b}
.cx-row em{margin-left:14px;font-size:12.5px;color:var(--blue)}
.cx-r2{left:208px;top:240px;width:280px;gap:6px}
.cx-seat{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:1px solid #e4ecf5;border-radius:6px;background:#fff}
.cx-seat>i{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.cx-seat>i.w::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;background:#1f9d6b}
.cx-seat>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.cx-seat b{font-size:12.5px;font-weight:600;color:var(--ink)}
.cx-seat small{font-size:11.5px;color:#46556b}
.cx-r3{left:500px;top:240px;width:280px}
.cx-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #e4ecf5;border-radius:6px;background:#fff}
.cx-card>small{font-size:11.5px;color:#46556b}
.cx-card>b{font-size:14.5px;font-weight:600;color:var(--navy)}
.cx-meter{display:block;height:6px;margin:6px 0 4px;border-radius:3px;background:#eef2f7;overflow:hidden}
.cx-meter i{display:block;width:72%;height:100%;border-radius:3px;background:var(--blue)}
.cx-sub{font-size:11.5px;line-height:1.45;color:#46556b}
.cx-r4{left:208px;top:418px;width:572px}
.cx-tbl{display:block;padding:4px 14px 6px;border:1px solid #e4ecf5;border-radius:6px;background:#fff}
.cx-tr{display:grid;grid-template-columns:1.6fr 1.1fr 1fr .6fr;align-items:center;height:34px;border-bottom:1px solid #eef2f7;font-size:12.5px;color:var(--ink)}
.cx-tr:last-child{border-bottom:0}
.cx-th{height:28px;font-size:11.5px;color:#6b778a}
.cx-tr em{justify-self:start;padding:3px 9px;border-radius:5px;font-size:11.5px;font-weight:600}
.cx-rev{background:#fef3e2;color:var(--amber)}
.cx-ok{background:#e7f6ee;color:var(--green)}

/* ---- skeleton: grey bars carry the detail, so the eye goes to the four
   regions and the files behind them; only the headings stay as words ---------- */
.cx-b{display:block;flex:0 0 auto;height:7px;border-radius:4px;background:#e3e9f1}
.cx-b.w10{width:14px} .cx-b.w12{width:12%} .cx-b.w24{width:24%} .cx-b.w26{width:26%} .cx-b.w30{width:30%} .cx-b.w34{width:34%}
.cx-b.w36{width:36%} .cx-b.w38{width:38%} .cx-b.w40{width:40%} .cx-b.w42{width:42%} .cx-b.w44{width:44%} .cx-b.w46{width:46%}
.cx-b.w48{width:48%} .cx-b.w50{width:50%} .cx-b.w54{width:54%} .cx-b.w56{width:56%} .cx-b.w58{width:58%} .cx-b.w60{width:60%}
.cx-b.w62{width:62%} .cx-b.w70{width:70%} .cx-b.w76{width:76%} .cx-b.w90{width:90%}
.cx-bd{background:#cfd8e4}                          /* a title-weight bar */
.cx-bl{height:10px}
.cx-bb{background:#b9d3f1;margin-left:14px}          /* a link */
.cx-bw{background:rgba(255,255,255,.7)}              /* on the blue button */
.cx-bn{margin-left:auto}                              /* a count at the row end */
.cx-hi .cx-bs{width:130px;margin-top:6px}
.cx-nav .cx-b{background:#e8edf3}
.cx-ws .cx-b{margin:3px 0}
.cx-find .cx-b{margin:2px 0}
.cx-grp .cx-b{height:6px;background:#edf1f6}
.cx-crumb{flex:1 1 auto}
.cx-crumb .cx-b{width:110px}
.cx-tb{width:92px;padding:9px 12px}
.cx-tb .cx-b{width:100%}
.cx-pl{flex:0 0 auto;display:block;width:74px;height:18px;padding:0 !important;border-radius:5px}
.cx-row .cx-pl{margin-left:auto}
.cx-seat>span{gap:6px;flex:1 1 auto}
.cx-card{gap:7px}
.cx-card .cx-meter{margin:4px 0}
.cx-tr>span{display:flex;align-items:center;padding-right:14px;min-width:0}
.cx-th .cx-b{height:6px;background:#edf1f6}

/* ---- the callouts: what each panel reads -------------------------------- */
.cx-co{position:absolute;z-index:3;display:flex;flex-direction:column;border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 22px 44px -20px rgba(2,37,79,.38),0 4px 12px -6px rgba(2,37,79,.14)}
.cx-ch{display:flex;flex-direction:column;gap:5px;padding:15px 18px}
.cx-ch b{font-size:15px;font-weight:600;color:var(--navy)}
.cx-ch small{font-size:12.5px;line-height:1.45;color:var(--mute)}
.cx-code{display:block;padding:11px 18px;background:var(--cloud);border-top:1px solid var(--line);
  font:500 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}
.cx-code i{font-style:normal;color:var(--blue)}
/* the callouts deliberately overlap the window's edges, each one laid over the
   panel it explains, as on the reference */
.cx-c1{left:770px;top:18px;width:330px}
.cx-c2{left:40px;top:222px;width:330px}
.cx-c3{left:790px;top:318px;width:312px}
.cx-c4{left:60px;top:404px;width:330px}

/* replay, as on the reference: appears once the play-through ends */
.cx-replay{display:none}
.js .cx-replay{position:absolute;right:10px;bottom:10px;z-index:4;width:40px;height:40px;border-radius:6px;background:#fff;
  box-shadow:0 4px 12px rgba(2,37,79,.16);display:grid;place-items:center;opacity:0;pointer-events:none}
.js .cx.go .cx-replay{pointer-events:auto}
.cx-replay:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- breakpoints: a floor for --s; the page script sets the exact fit ---- */
@media (max-width:991px){ .cx{--s:.64} }
@media (max-width:767px){ .cx{--s:.38} .js .cx-replay{right:6px;bottom:6px;width:32px;height:32px} }
@media (max-width:479px){ .cx{--s:.25} }


/* the dashboard (window and callouts together) at 80% inside the full-size blue
   stage on desktop; on phones the whole stage is already small, so it fills it */
.cx-in{position:absolute;left:0;top:0;width:1120px;height:560px;display:block;transform:scale(.8);transform-origin:50% 50%}
@media (max-width:767px){ .cx-in{transform:none} }