/* ============================================================================
   THE GATE AT WORK — Office page, Control section. After Stripe Radar's hero,
   restyled light to match the site's other illustrations (blue stage, white cards).

   What Radar's code does, and what this keeps:
   - blocks sit on a grid, placed in grid units over a 40px background grid.
     Kept: a fixed 1080x600 stage on the same 40px grid, every block at an
     exact position on it.
   - the scenario (scan, results, profile, decline) runs on a script timeline;
     only the small loops are keyframes (marching dashes, pulsing dots, a
     turning loading ring). Here the whole scenario is keyframes too, in
     css/motion.css (GATE), so this file stays builder-safe.
   Its RESTING state is the last frame — the action held, the profile complete,
   waiting in the Inbox — because that is the frame that says the point. With
   motion off it is a finished picture.
   ========================================================================== */

/* --k shrinks the content inside the blue frame (80% on desktop, full on phones,
   where the whole stage is already small); the frame keeps the full 1080x600 fit */
.gt{--s:1;--k:.8;position:relative;max-width:100%;width:calc(1080px * var(--s));height:calc(600px * var(--s));margin:34px auto 0;
  border-radius:6px;overflow:hidden;
  /* the Every department backdrop (rotate.css .cl-band): pale periwinkle with a fine
     white dot grid */
  background-color:#e4ecfb;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:6px 6px}
.gt-stage{position:absolute;left:0;top:0;width:1080px;height:600px;transform-origin:0 0;
  transform:translate(calc(540px * var(--s) * (1 - var(--k))),calc(300px * var(--s) * (1 - var(--k)))) scale(calc(var(--s) * var(--k)));
  border-radius:8px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);
  /* the same pale stage as the expense report (fill.css): this section sits on the grey
     band, where a saturated blue read heavy; the old grid and light streaks are gone */
  background:radial-gradient(600px 380px at 0 0,rgba(41,70,182,.12),transparent 70%),linear-gradient(160deg,#eef2fd,#e3eafb 60%,#eaf1fd)}
/* clipped, so a stale --s can never widen the page */
.band-sky,.gate-sec{overflow:hidden}
.gt-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
.gt-mono{font:600 11.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#46556b}

/* light running along the grid lines, as in the reference */
.gt-run{display:none}   /* the light streaks belonged to the dark version */
.gt-run1,.gt-run2{left:0;width:180px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.gt-run1{top:40px}
.gt-run2{top:560px}
.gt-run3{left:360px;top:0;width:1px;height:180px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent)}

/* ---- left: the checks -------------------------------------------------- */
.gt-chk{position:absolute;left:40px;width:266px;height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:8px;
  background:#fff;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  box-shadow:0 18px 40px -18px rgba(2,37,79,.35),0 4px 12px -6px rgba(2,37,79,.12)}
.gt-c1{top:80px}
.gt-c2{top:160px}
.gt-c3{top:240px}
.gt-chk img{position:absolute;left:16px;top:16px}
.gt-chk{padding-left:48px}
.gt-spin{opacity:0}
.gt-dot{position:absolute;display:block;width:8px;height:8px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-sizing:content-box;
  box-shadow:0 0 0 0 rgba(41,70,182,.5)}
.gt-chk .gt-dot{right:-6px;top:20px}
.gt-c2 .gt-dot{background:#2946b6}

/* connectors: striped backgrounds so the dashes can march (motion.css) */
.gt-ln{position:absolute;display:block}
.gt-lh{height:1.5px;background-image:repeating-linear-gradient(90deg,rgba(41,70,182,.55) 0 4px,transparent 4px 8px);background-size:8px 1.5px}
.gt-lv{width:1.5px;background-image:repeating-linear-gradient(180deg,rgba(41,70,182,.55) 0 4px,transparent 4px 8px);background-size:1.5px 8px}
.gt-l1{left:310px;top:106px;width:30px}
.gt-l2{left:310px;top:186px;width:30px}
.gt-l3{left:310px;top:266px;width:30px}
.gt-lbus{left:340px;top:106px;height:195px}
.gt-lin{left:340px;top:300px;width:40px}

.gt-verdict{position:absolute;left:40px;top:444px;width:300px;height:92px;padding:22px 20px;border-radius:8px;background:#fff;
  box-shadow:0 18px 40px -18px rgba(2,37,79,.35),0 4px 12px -6px rgba(2,37,79,.12)}
.gt-verdict .gt-mono{position:relative;display:block;height:14px}
.gt-v0,.gt-v1,.gt-p0,.gt-p1{position:absolute;left:0;top:0;white-space:nowrap}
.gt-v0,.gt-p0{opacity:0}
.gt-v1{color:#2946b6}
.gt-track{position:relative;display:block;height:10px;margin-top:16px;border-radius:5px;background:#eef2f7;overflow:hidden}
.gt-fill{position:absolute;inset:0;display:block;transform-origin:0 50%}
.gt-fill-l{border-radius:5px;background:linear-gradient(90deg,#d6dff7,#2946b6)}
.gt-fill-r{border-radius:5px;background:linear-gradient(90deg,#d6dbf0,var(--blue))}

/* ---- centre: the action ------------------------------------------------- */
.gt-card{position:absolute;left:380px;top:40px;width:340px;height:520px;padding:26px 26px 22px;border-radius:8px;
  background:#fff;color:var(--ink);display:flex;flex-direction:column;
  box-shadow:0 34px 70px -30px rgba(2,37,79,.45)}
.gt-who{display:flex;align-items:center;gap:12px}
.gt-who i{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.gt-who span{display:flex;flex-direction:column;gap:2px}
.gt-who b{font:700 17px/1.2 var(--display);color:var(--navy)}
.gt-who small{font-size:12px;color:var(--t4)}
.gt-lab{margin-top:18px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--navy)}
.gt-act{display:flex;align-items:center;gap:14px}
.gt-tile{flex:none;width:62px;height:62px;border-radius:6px;background:var(--sky);display:grid;place-items:center}
.gt-act span:last-child{display:flex;flex-direction:column;gap:3px}
.gt-act b{font-size:15px;font-weight:600;color:var(--ink)}
.gt-act small{font-size:12.5px;color:var(--t4)}
.gt-rule{display:block;height:1px;margin-top:18px;background:var(--line)}
.gt-f{position:relative;isolation:isolate;display:flex;align-items:center;height:40px;padding:0 13px;border-radius:6px;
  border:1px solid var(--line);background:var(--cloud);font-size:13.5px;color:var(--ink)}
.gt-tint,.gt-tint2{position:absolute;inset:-1px;z-index:-1;display:block;border-radius:6px}
.gt-tint{background:#eef2fc;border:1px solid #d6dff7}
.gt-tint2{background:var(--sky);border:1px solid #c4ccec}
.gt-fto{color:#2946b6}
.gt-held{margin-left:auto;padding:3px 9px;border-radius:6px;background:#e4ecfb;color:#2946b6;font:600 11.5px var(--ui);font-style:normal}
.gt-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.gt-fap span{position:absolute;left:13px;top:0;line-height:38px;white-space:nowrap}
.gt-a0{opacity:0;color:var(--t4)}
.gt-a1{color:var(--blue-d);font-weight:600}
.gt-by{margin-top:auto;text-align:center;font-size:12.5px;color:var(--t4)}
.gt-by b{color:var(--blue);font-weight:700}

/* ---- right: the profile ------------------------------------------------- */
.gt-lout{left:720px;top:300px;width:30px}
.gt-lbus2{left:750px;top:120px;height:309px}
.gt-lp1{left:750px;top:120px;width:30px}
.gt-lp2{left:750px;top:428px;width:30px}
.gt-side{position:absolute;left:780px;top:60px;width:260px;height:460px;border-radius:8px;background:#fff;
  box-shadow:0 18px 40px -18px rgba(2,37,79,.35),0 4px 12px -6px rgba(2,37,79,.12)}
.gt-dl{left:-22px;top:50%;margin-top:-4px}
.gt-prof{position:absolute;left:18px;top:18px;width:224px;height:86px;padding:16px;
  border-radius:6px;background:#f3f8fe;border:1px solid #dce0f1}
.gt-prof .gt-mono{position:relative;display:block;height:14px;font-size:12px}
.gt-prof .gt-track{height:8px;margin-top:14px}
.gt-pct{position:absolute;right:16px;bottom:10px;font:600 11px var(--ui);color:var(--navy)}
.gt-h{position:absolute;left:18px;font-size:14.5px;font-weight:600;color:var(--navy)}
.gt-side>.gt-h:nth-of-type(2){top:128px}
.gt-side>.gt-h:nth-of-type(6){top:320px}
.gt-row{position:absolute;left:18px;width:224px;height:44px;display:flex;align-items:center;
  border-bottom:1px solid #eef2f7;font-size:13px;color:#3d4a5c}
.gt-side>.gt-row:nth-of-type(3){top:156px}
.gt-side>.gt-row:nth-of-type(4){top:200px}
.gt-side>.gt-row:nth-of-type(5){top:244px}
.gt-tag{position:relative;margin-left:auto;width:74px;height:22px}
.gt-tag>*{position:absolute;right:0;top:0;height:22px;line-height:22px;padding:0 8px;border-radius:5px;white-space:nowrap;font-size:12px;font-style:normal}
.gt-t0{opacity:0;color:#6b778a}
.gt-t1{background:#eef1f5;color:#46556b}
.gt-need{background:#eef2fc;color:#2946b6;font-weight:600}
.gt-r{position:absolute;left:18px;width:224px;height:40px;display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.3;color:var(--ink)}
.gt-r img{flex:none}
.gt-side>.gt-r:nth-of-type(7){top:348px}
.gt-side>.gt-r:nth-of-type(8){top:396px}

/* ---- the preferences look (home page, prefs.css): a blue-to-pale vertical stage,
   frosted glass panels, flat white bubbles with no drop shadows. Overrides the
   light-card styling above; layout and motion are unchanged. ------------------- */
/* the wash itself is painted on .gt (above), so the frame keeps its full size
   while the content sits at --k inside it */
.gt-stage{border-radius:6px;box-shadow:none;background:transparent}
/* small pieces: flat white bubbles */
.gt-chk,.gt-verdict{box-shadow:none;border-radius:8px}
.gt-dot{border-color:rgba(255,255,255,.9)}
/* the big panels: frosted glass, as the chat panel */
.gt-card,.gt-side{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gt-card .gt-f,.gt-card .gt-tile{background:#fff;border-color:rgba(255,255,255,.9)}
.gt-card .gt-rule{background:rgba(255,255,255,.7)}
.gt-card .gt-by{color:#3d4a5c}
.gt-prof{background:#fff;border-color:rgba(255,255,255,.9)}
.gt-row{border-bottom-color:rgba(255,255,255,.6);color:#1c2636}
.gt-t1{background:#fff}
/* connectors: fine royal dashes (white would vanish on the pale wash) */
.gt-lh{background-image:repeating-linear-gradient(90deg,rgba(41,70,182,.55) 0 4px,transparent 4px 8px)}
.gt-lv{background-image:repeating-linear-gradient(180deg,rgba(41,70,182,.55) 0 4px,transparent 4px 8px)}

/* ---- breakpoints: a floor for --s; the page script sets the exact fit ---- */
@media (max-width:991px){ .gt{--s:.66} }
@media (max-width:767px){ .gt{--s:.40;--k:1} }
@media (max-width:479px){ .gt{--s:.26} }