/* Atlas v2 · Act 4, "Give the final order." (act4.js). The three executives beside one dark glass screen holding the
   Atlas dashboard, the week's calendar at its centre, the tiles at their own depths; each executive's orders under them.
   Frost carries the light; champagne marks only what is working (a booking, a Done, the forecast). A shimmer (--sh, set
   by act4.js from the screen's turn) slides across the glass and every tile as one band. Every class is prefixed a4-. */

/* the title band a little shorter, so the screen and the executives get the room */
.a4 .act-cap { height: 15vh; }
.a4-cue { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 6px 13px 6px 10px; border-radius: 999px; vertical-align: 1px;
  font: 500 14px/1 var(--sans); letter-spacing: -.005em; color: #0b1117; background: linear-gradient(100deg, #e2f2fd, #a9dcff 55%, #7cc4f6);
  box-shadow: 0 0 0 0 rgba(127,196,246,.5), 0 0 24px rgba(127,196,246,.45); animation: a4-cue 2s ease-in-out infinite; }
.a4-cue svg { width: 14px; height: 14px; fill: #0b1117; }
@keyframes a4-cue { 50% { box-shadow: 0 0 0 7px rgba(127,196,246,0), 0 0 34px rgba(127,196,246,.7); } }
.a4-played .a4-cue { display: none; }
.a4-tally { margin-left: 10px; font: 400 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.a4-tally [data-v] { color: #ecdcbf; }
.a4-tally[hidden] { display: none !important; }
.a4-reset { margin-left: 4px; padding: 4px 2px; background: none; border: 0; font: inherit; color: #a9dcff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.a4-reset:hover { color: #e9f6ff; } .a4-reset:focus-visible { outline: 2px solid #7fdcff; outline-offset: 2px; border-radius: 3px; }
.a4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* the dock: the executives either side of the screen. It reaches past the act's side margins (clear of the spine's
   labels on the left), so the screen keeps its size with a column beside it each side. (The bottom padding keeps the
   screen clear of the page's sticky scroll cue.) */
.a4-dock { position: relative; z-index: 1; align-self: stretch; min-height: 0; padding-bottom: 46px; margin: 0 calc(28px - 12vw) 0 calc(176px - 12vw);
  display: grid; grid-template-columns: minmax(176px, 214px) minmax(0, 1000px) minmax(176px, 214px); justify-content: center; column-gap: 34px; align-items: center; }
.a4-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.a4-mid { position: relative; z-index: 1; height: 100%; min-height: 0; display: grid; place-items: center; }
/* two soft lights behind the glass, so the blur has something to frost */
.a4-glow { position: absolute; inset: 4% 2%; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 42%, rgba(63,157,255,.2), transparent 70%), radial-gradient(34% 44% at 74% 66%, rgba(200,169,120,.08), transparent 70%), radial-gradient(50% 40% at 60% 20%, rgba(124,196,246,.1), transparent 70%); filter: blur(24px); }
.a4-scene { position: relative; width: 100%; height: min(600px, 100%); perspective: 1500px; perspective-origin: 50% 35%; transform-style: preserve-3d; }
.a4-screen { --sh: 0; position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; will-change: transform, opacity; display: grid; grid-template-rows: auto 1fr; padding: 14px 16px 16px; opacity: 0; }
/* the light it stands over: a soft pool on the floor under the screen */
.a4-floor { position: absolute; left: 50%; bottom: -14%; width: 90%; height: 46%; pointer-events: none; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(closest-side, rgba(63,157,255,.22), rgba(63,157,255,.06) 60%, transparent); filter: blur(10px); }

/* the glass itself, a layer of its own (a blur on the screen would flatten the tiles' depths into one plane): dark,
   smoked, a cold rim along its top edge */
.a4-glass { position: absolute; inset: 0; border-radius: 26px; opacity: 0; overflow: hidden;
  background: linear-gradient(160deg, rgba(40,58,82,.42), rgba(8,13,20,.86) 34%, rgba(4,7,12,.92));
  border: 1px solid rgba(169,205,242,.2); -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(233,246,255,.24), inset 0 0 80px rgba(63,157,255,.07), 0 50px 140px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.5), 0 0 90px rgba(63,157,255,.12); }
/* the shimmer: a slanted band of light that the turn carries across the pane */
.a4-glass::after, .a4-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(233,246,255,.05) 45%, rgba(255,255,255,.16) 50%, rgba(233,246,255,.05) 55%, transparent 62%) no-repeat;
  background-size: 300% 100%; mix-blend-mode: screen; }
.a4-glass::after { background-position: calc(var(--sh) * 1%) 0; }
/* (each tile's band offset by where it sits, so the one band crosses the whole screen) */
.a4-tile::after { background-position: calc((var(--sh) - (var(--ox, 50) - 50) * .6) * 1%) 0; }

.a4-bar { position: relative; display: flex; align-items: center; gap: 16px; padding: 0 6px 12px; opacity: 0; transform: translateZ(8px); }
.a4-mark { font: 400 12px/1 var(--sans); letter-spacing: .42em; color: var(--ivory); }
.a4-biz { font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.a4-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a9dcff; }
.a4-live i, .a4-livedot { width: 6px; height: 6px; border-radius: 50%; background: #7fdcff; box-shadow: 0 0 8px #7fdcff; animation: a4-blink 1.6s ease-in-out infinite; }
.a4-livedot { display: inline-block; margin-right: 7px; vertical-align: 1px; }
@keyframes a4-blink { 50% { opacity: .35; } }
.a4-ex { font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 5px 9px; border: 1px solid var(--line-hi); border-radius: 6px; }

/* the layout: four live figures across the top; the week's calendar the centrepiece below them; the month's revenue
   and the live activity beside it */
.a4-tiles { position: relative; transform-style: preserve-3d; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.a4-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 15px; padding: 12px 14px; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(165deg, rgba(26,36,52,.82), rgba(8,13,20,.9)); border: 1px solid rgba(169,205,242,.16);
  box-shadow: inset 0 1px 0 rgba(233,246,255,.12), 0 20px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35); color: var(--muted); }
.a4-tile[role="button"] { cursor: pointer; }
.a4-tile[role="button"]:focus-visible { outline: 2px solid #7fdcff; outline-offset: 2px; }
.a4-tile small { display: block; font: 400 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a4-tile p { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.a4-big { font: 500 clamp(22px, 1.9vw, 30px)/1 var(--sans); letter-spacing: -.03em; color: var(--head); margin: 7px 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* an outcome landing on a tile: the tile flashes ice, and its line of news (champagne) takes the place of its subtitle */
.a4-hit { animation: a4-hit 1.3s ease-out; }
@keyframes a4-hit { 0% { border-color: rgba(127,220,255,.9); box-shadow: inset 0 1px 0 rgba(233,246,255,.2), 0 0 0 1px rgba(127,220,255,.6), 0 0 36px rgba(127,220,255,.45), 0 20px 46px rgba(0,0,0,.6); } }
.a4-dl { font-style: normal; color: #ecdcbf; -webkit-text-fill-color: currentColor; background: none; }
.a4-tile p:has(.a4-dl:not(:empty)) .a4-sub { display: none; }
.a4-new-dl { animation: a4-dl .6s ease-out; }
@keyframes a4-dl { from { opacity: 0; transform: translateY(5px); } }

.a4-leads, .a4-revs, .a4-calls, .a4-views { grid-column: span 3; grid-row: 1; display: flex; flex-direction: column; }
.a4-leads p, .a4-revs p, .a4-calls p, .a4-views p { margin-top: auto; }
.a4-cal { grid-column: 1 / 9; grid-row: 2 / 4; }
.a4-rev { grid-column: 9 / 13; grid-row: 2; display: flex; flex-direction: column; }
.a4-feed { grid-column: 9 / 13; grid-row: 3; display: flex; flex-direction: column; }

.a4-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-bottom: 6px; }
.a4-bars i { position: relative; flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #a9dcff, rgba(124,196,246,.35)); overflow: hidden; }
/* (a call-back's share of each hour, in champagne at the top of its bar) */
.a4-cbars u { position: absolute; left: 0; right: 0; top: 0; height: 0; background: #e8d3ad; box-shadow: 0 0 8px rgba(200,169,120,.7); }
.a4-seg { display: flex; gap: 3px; height: 6px; margin: 2px 0 8px; } .a4-seg i { flex: 12; border-radius: 4px; transition: flex .4s; }
.a4-seg i:nth-child(1) { background: #e9f6ff; } .a4-seg i:nth-child(2) { background: #7cc4f6; } .a4-seg i:nth-child(3) { background: rgba(124,196,246,.4); }
.a4-st { font-size: .5em; letter-spacing: 1px; vertical-align: middle; } .a4-st i { font-style: normal; color: #4a5462; } .a4-st i.on { color: #fbbc04; }

.a4-th { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.a4-th b { margin-left: auto; color: var(--head); font-weight: 500; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a4-th b em { font-style: normal; font-size: 11px; color: var(--muted); -webkit-text-fill-color: currentColor; background: none; letter-spacing: 0; }

/* the week's calendar: hours down the side, a column a day, the jobs as blocks; the share of the week booked fills a
   meter, and at 80% the champagne "Calendar full" comes on */
.a4-cal { display: flex; flex-direction: column; padding: 12px 14px 10px; background: linear-gradient(165deg, rgba(20,30,46,.9), rgba(6,10,16,.94)); border-color: rgba(127,196,246,.26); }
.a4-full { display: none; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #0b1117; background: #c8a978; padding: 5px 9px; border-radius: 999px; box-shadow: 0 0 18px rgba(200,169,120,.45); white-space: nowrap; }
.a4-isfull .a4-full { display: inline-block; animation: a4-dl .6s ease-out; }
.a4-meter { margin-left: auto; width: 70px; height: 5px; border-radius: 3px; background: rgba(124,196,246,.14); overflow: hidden; flex: none; }
.a4-meter i { display: block; height: 100%; width: 41%; border-radius: inherit; background: linear-gradient(90deg, #7cc4f6, #e9f6ff); transition: width .6s; }
.a4-isfull .a4-meter i { background: linear-gradient(90deg, #c8a978, #f3e4c6); }
.a4-th .a4-meter + b { margin-left: 0; }
.a4-week { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.a4-cal-head, .a4-cal-grid { display: grid; grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 4px; }
.a4-cal-head { margin-bottom: 5px; }
.a4-cal-head span { font: 600 11.5px/1 var(--sans); color: #8d9aa8; text-align: center; letter-spacing: .03em; }
.a4-cal-head em { font-style: normal; font-weight: 400; color: #5f6c7a; -webkit-text-fill-color: currentColor; background: none; }
.a4-cal-head .a4-today { color: #e9f6ff; } .a4-cal-head .a4-today em { color: #7fdcff; }
.a4-cal-grid { min-height: 0; }
.a4-hours { display: grid; grid-template-rows: repeat(9, 1fr); }
.a4-hours span { font: 400 9.5px/1 var(--mono); color: #5f6c7a; text-align: right; padding-right: 3px; }
.a4-day { min-height: 0; display: grid; }
.a4-day-b { position: relative; display: grid; grid-template-rows: repeat(9, 1fr); border-radius: 8px; background: rgba(20,30,44,.5); overflow: hidden; }
.a4-today .a4-day-b { background: rgba(30,52,76,.55); box-shadow: inset 0 0 0 1px rgba(127,220,255,.22); }
.a4-day-b > i { border-top: 1px solid rgba(127,220,255,.06); }
.a4-now { position: absolute; left: 0; right: 0; height: 2px; background: #7fdcff; box-shadow: 0 0 10px #7fdcff; z-index: 2; pointer-events: none; }
.a4-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e9f6ff; box-shadow: 0 0 8px #7fdcff; }
.a4-job { position: absolute; left: 2px; right: 2px; margin: 2px 0 0; border-radius: 6px; padding: 4px 4px 4px 5px; display: grid; align-content: start; gap: 1px; overflow: hidden;
  font: inherit; text-align: left; color: inherit; cursor: pointer; }
.a4-job:focus-visible { outline: 2px solid #7fdcff; outline-offset: 1px; z-index: 3; }
.a4-job b { font-size: 10.5px; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e9f4ff; }
.a4-job span, .a4-job small { font-size: 9.5px; line-height: 1.25; color: #a9cdf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (a one-hour job is too short for three lines: its name alone, centred in it) */
.a4-job.a4-short { padding: 0 6px; align-content: center; } .a4-job.a4-short span, .a4-job.a4-short small { display: none; }
.a4-old { background: rgba(52,64,80,.5); border: 1px solid rgba(169,205,242,.1); } .a4-old b { color: #7f8e9c; font-weight: 500; }
.a4-old:hover { border-color: rgba(169,205,242,.3); }
/* the jobs the orders book: blue, each popping onto the week with a flash as it lands */
.a4-new { background: linear-gradient(180deg, rgba(74,168,255,.42), rgba(74,168,255,.2)); border: 1px solid rgba(127,220,255,.6); border-left: 2px solid #7fdcff; box-shadow: 0 0 16px rgba(127,220,255,.25); }
.a4-new:hover { box-shadow: 0 0 22px rgba(127,220,255,.5); }
.a4-pop { animation: a4-pop .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes a4-pop { 0% { transform: scale(.4); opacity: 0; box-shadow: 0 0 0 rgba(127,220,255,0); } 45% { opacity: 1; box-shadow: 0 0 34px rgba(233,246,255,.9); background: rgba(200,230,255,.7); } }
/* a job's details, beside it when it is clicked */
.a4-jd { position: absolute; z-index: 6; width: 200px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: rgba(8,14,22,.97); border: 1px solid rgba(127,220,255,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 20px rgba(127,220,255,.15); animation: a4-dl .25s ease-out; }
.a4-jd[hidden] { display: none; }
.a4-jd b { color: var(--head); font-size: 12.5px; font-weight: 600; } .a4-jd span { font-size: 11.5px; color: #a9cdf2; }
.a4-jd small { font: 400 10.5px/1.35 var(--sans); letter-spacing: 0; text-transform: none; white-space: normal; color: #ecdcbf; }
.a4-cal-dl { min-height: 0; text-align: right; font-size: 11px !important; margin-top: 4px !important; }
.a4-cal-dl:has(.a4-dl:empty) { display: none; }

/* the month's revenue: the line climbs as jobs are booked; the strategy adds a dashed champagne forecast past today */
.a4-line { flex: 1; min-height: 46px; } .a4-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.a4-fl { opacity: 0; stroke-dashoffset: 0; }
.a4-fcast .a4-fl { opacity: 1; animation: a4-draw 1.2s ease-out; }
@keyframes a4-draw { from { opacity: 0; } }
.a4-fc { display: none; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 6px !important; }
.a4-fcast .a4-fc { display: flex; animation: a4-dl .6s ease-out; }
.a4-fc span { font: 400 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.a4-fc b { color: #ecdcbf; font-weight: 600; font-size: 13px; }
.a4-exs { padding: 3px 5px; border: 1px solid var(--line-hi); border-radius: 4px; }
.a4-rv-foot { margin-top: 4px !important; font: 400 10px/1 var(--mono) !important; letter-spacing: .08em; color: var(--dim) !important; }
.a4-fcast .a4-rv-foot { display: none; }

/* the live activity: newest at the top, each line tagged with the executive who did it */
.a4-wait { font-size: 11px !important; font-weight: 400 !important; color: #ecdcbf !important; letter-spacing: 0 !important; }
.a4-log { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 7px; flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.a4-fi { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 8px; align-items: start; animation: a4-fi .45s ease-out; }
@keyframes a4-fi { from { opacity: 0; transform: translateY(-8px); } }
.a4-fd { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #7fdcff; box-shadow: 0 0 6px currentColor; color: #7fdcff; }
.a4-f-dp .a4-fd { background: #b9c8ff; color: #b9c8ff; } .a4-f-cc .a4-fd { background: #e9f6ff; color: #e9f6ff; }
.a4-fi small { font-size: 8.5px; letter-spacing: .12em; margin-bottom: 2px; }
.a4-fi p { font-size: 11.5px; line-height: 1.32; color: #c5d3e0; }
.a4-fi p b { color: var(--head); font-weight: 600; }
.a4-fi time { font: 400 9px/1 var(--mono); color: var(--dim); white-space: nowrap; margin-top: 2px; }
/* (a result that follows from the line under it, a booking from a reply: champagne, no tag, a ring for its dot) */
.a4-fsub small { display: none; } .a4-fsub p { color: #ecdcbf; } .a4-fsub p b { color: #f6ead2; }
.a4-fsub .a4-fd { background: none; border: 1.5px solid #c8a978; color: #c8a978; width: 7px; height: 7px; box-sizing: border-box; }
.a4-five { color: #fbbc04; letter-spacing: 1px; font-size: 10px; }

/* the chain of prepared work: a sheet over the dashboard (the dashboard dims under it), each step ticking in, then the
   order going out */
.a4-scrim { position: absolute; inset: 0; z-index: 4; border-radius: 26px; pointer-events: none; background: rgba(3,6,11,.62); opacity: 0; transform: translateZ(60px); transition: opacity .3s; }
.a4-prep .a4-scrim { opacity: 1; }
.a4-sheet { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(470px, 88%); display: grid; gap: 14px; padding: 18px 20px 16px; border-radius: 18px; text-align: left;
  background: linear-gradient(165deg, rgba(30,46,68,.98), rgba(9,15,23,.98)); border: 1px solid rgba(127,220,255,.4);
  box-shadow: inset 0 1px 0 rgba(233,246,255,.2), 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(63,157,255,.2);
  opacity: 0; transform: translate(-50%, -46%) translateZ(90px) scale(.94); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.2, .4, 1); }
.a4-sheet[hidden] { display: none; }
.a4-sheet.a4-in { opacity: 1; transform: translate(-50%, -50%) translateZ(90px) scale(1); }
.a4-sheet.a4-out { opacity: 0; transform: translate(-50%, -54%) translateZ(130px) scale(.9); transition-duration: .3s; }
.a4-sh-h { display: flex; align-items: center; gap: 12px; }
.a4-sh-h .a4-badge { display: block; width: 38px; height: 38px; flex: none; }
.a4-sh-h small { display: block; font: 400 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #a9cdf2; }
.a4-sh-h b { display: block; margin-top: 4px; font: 500 19px/1.15 var(--sans); letter-spacing: -.02em; color: var(--head); }
.a4-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a4-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.35; color: #8392a2; transition: color .3s; }
.a4-steps li i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(169,205,242,.3); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.a4-steps svg { width: 18px; height: 18px; fill: none; stroke: #0b1117; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s .1s; }
.a4-steps li.a4-ticked { color: #e3edf6; }
.a4-steps li.a4-ticked i { border-color: #7fdcff; background: #7fdcff; box-shadow: 0 0 10px rgba(127,220,255,.6); }
.a4-steps li.a4-ticked svg { stroke-dashoffset: 0; }
.a4-sh-f { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(169,205,242,.12); }
.a4-sh-f b { font: 500 13px/1.3 var(--sans); color: var(--head); }
.a4-state { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a9cdf2; }
.a4-sent .a4-state { color: #ecdcbf; }
.a4-go { grid-column: 1 / -1; grid-row: 1; height: 4px; border-radius: 2px; background: rgba(124,196,246,.14); overflow: hidden; }
.a4-go i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7cc4f6, #e9f6ff); box-shadow: 0 0 10px #7fdcff; }
.a4-sending .a4-go i { width: 100%; transition: width .6s ease-in-out; }
.a4-sent .a4-go i { background: linear-gradient(90deg, #c8a978, #f3e4c6); box-shadow: 0 0 10px rgba(200,169,120,.8); }
/* the previews of the prepared work */
.a4-pv { border-radius: 12px; background: rgba(3,7,12,.5); border: 1px solid rgba(169,205,242,.1); padding: 10px 12px; }
.a4-sms small { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.a4-sms p { margin: 0; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: rgba(63,157,255,.22); border: 1px solid rgba(127,220,255,.25); font-size: 12.5px; line-height: 1.4; color: #e3edf6; }
.a4-wkp { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.a4-wkp div { display: grid; gap: 4px; align-content: start; } .a4-wkp small { font: 400 9.5px/1 var(--mono); color: var(--muted); text-align: center; }
.a4-wkp i { display: block; aspect-ratio: 1; border-radius: 4px; background: #1a2433 center / cover no-repeat; border: 1px solid rgba(169,205,242,.18); }
.a4-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.a4-plan small { display: block; font: 400 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.a4-plan b { font: 500 24px/1.1 var(--sans); color: var(--head); }
.a4-cbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12px; }
.a4-cbl li { display: flex; gap: 10px; align-items: baseline; } .a4-cbl b { color: var(--head); font-weight: 600; min-width: 74px; } .a4-cbl span { color: #a9cdf2; } .a4-cbl em { color: var(--muted); font-style: normal; }

/* ——— the executives and their orders ——— */
.a4-side { position: relative; z-index: 2; align-self: center; opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 60px)); }
.a4-side-l { display: grid; }
/* (on the right, the two executives stand side by side over their two sets of orders) */
.a4-side-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.a4-side-r .a4-exec { display: contents; }
.a4-x-dp .a4-fig { grid-column: 1; grid-row: 1; } .a4-x-cc .a4-fig { grid-column: 2; grid-row: 1; }
.a4-x-dp .a4-who { grid-column: 1; grid-row: 2; } .a4-x-cc .a4-who { grid-column: 2; grid-row: 2; }
.a4-x-dp .a4-orders { grid-column: 1 / -1; grid-row: 3; } .a4-x-cc .a4-orders { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }
.a4-fig { position: relative; height: clamp(140px, 24vh, 220px); display: flex; justify-content: center; align-items: flex-end; }
.a4-fig img { height: 100%; width: auto; max-width: none; position: relative; filter: drop-shadow(0 0 22px rgba(127,220,255,.45)); opacity: .9; transition: filter .5s, opacity .5s; }
.a4-fig img:not([src]) { visibility: hidden; }
/* (each stands on a little pool of light, which brightens while their order is going out) */
.a4-fig::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 120px; height: 16px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,220,255,.45), transparent); transition: opacity .5s; opacity: .6; }
.a4-on .a4-fig img { opacity: 1; filter: drop-shadow(0 0 30px rgba(127,220,255,.9)) brightness(1.15); }
.a4-on .a4-fig::after { opacity: 1; }
.a4-who { margin: 12px 0 10px; text-align: center; font: 500 12.5px/1.25 var(--sans); color: var(--head); letter-spacing: -.005em; min-height: 2.5em; display: grid; align-content: start; }
.a4-side-l .a4-who { min-height: 0; }
.a4-orders { display: grid; gap: 8px; }
.a4-oh { font: 400 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a4-order { position: relative; display: grid; gap: 3px; padding: 10px 12px 10px 13px; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--head);
  background: linear-gradient(165deg, rgba(30,44,64,.88), rgba(10,16,24,.94)); border: 1px solid rgba(169,205,242,.24);
  box-shadow: inset 0 1px 0 rgba(233,246,255,.12), 0 12px 28px rgba(0,0,0,.45); transition: border-color .2s, box-shadow .2s, transform .2s, background .3s; }
.a4-order:hover { border-color: rgba(127,220,255,.65); box-shadow: inset 0 1px 0 rgba(233,246,255,.18), 0 12px 28px rgba(0,0,0,.45), 0 0 22px rgba(127,220,255,.25); transform: translateY(-1px); }
.a4-order:focus-visible { outline: 2px solid #7fdcff; outline-offset: 3px; }
.a4-ol { font: 500 13.5px/1.25 var(--sans); letter-spacing: -.01em; }
.a4-om { font: 400 11px/1.3 var(--sans); color: #8fb6d8; }
.a4-ok, .a4-badge { display: none; }
/* the headline order, filled with light and breathing until the first order is given */
.a4-lead { background: linear-gradient(165deg, rgba(63,157,255,.4), rgba(20,48,80,.9)); border-color: rgba(127,220,255,.6); }
.a4-lead::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: a4-breathe 2s ease-in-out infinite; }
.a4-played .a4-lead::before { animation: none; }
@keyframes a4-breathe { 50% { box-shadow: 0 0 0 5px rgba(127,220,255,.12), 0 0 26px rgba(127,220,255,.5); } }
/* going out: a band of light runs through the button; done: dimmed, its result in champagne */
.a4-run { cursor: progress; border-color: rgba(127,220,255,.8); overflow: hidden; }
.a4-run::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(233,246,255,.18) 50%, transparent 70%) no-repeat; background-size: 250% 100%; animation: a4-run 1.1s linear infinite; }
@keyframes a4-run { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.a4-run .a4-om { color: #e9f6ff; }
.a4-done { cursor: default; background: linear-gradient(165deg, rgba(22,28,36,.85), rgba(8,12,18,.92)); border-color: rgba(200,169,120,.32); }
.a4-done:hover { transform: none; border-color: rgba(200,169,120,.5); box-shadow: inset 0 1px 0 rgba(233,246,255,.08), 0 12px 28px rgba(0,0,0,.45); }
.a4-done .a4-ol { color: #9aa6b2; }
.a4-done .a4-om { color: #ecdcbf; }
.a4-done .a4-om::before { content: "✓ Done · "; font-weight: 600; }
.a4-nudge { animation: a4-nudge .4s; }
@keyframes a4-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.a4-hint { animation: a4-hint 1.4s ease-out; }
@keyframes a4-hint { 0%, 60% { border-color: #7fdcff; box-shadow: 0 0 0 3px rgba(127,220,255,.25), 0 0 28px rgba(127,220,255,.55); } }
/* (the small badges: the executive's head and shoulders in a ring, cut from the same silhouette) */
.a4-badge { border-radius: 50%; border: 1px solid rgba(127,220,255,.45); background: rgba(16,32,50,.9) center 8% / 170% auto no-repeat; box-shadow: 0 0 12px rgba(127,220,255,.25); }
.a4-b-mkt { background-image: var(--a4-sil-mkt); } .a4-b-dp { background-image: var(--a4-sil-dp); } .a4-b-cc { background-image: var(--a4-sil-cc); }

/* clean buttons: just the order's name until it goes out (its "Ready: …" line lives in the sheet); the left column's
   one executive needs no group label under his name */
.a4-om:empty { display: none; }
.a4-side-l .a4-oh { display: none; }
.a4-ready { margin: -4px 0 0; font: 400 12px/1.35 var(--sans); color: #ecdcbf; }
.a4-ready::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 8px var(--champagne); }

/* "Tap to start": a soft dark veil over the dashboard; the orders wait, dimmed, until it is tapped */
.a4-start { position: absolute; z-index: 6; left: 0; right: 0; top: 50%; height: min(600px, 100%); transform: translateY(-50%); display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 26px; padding: 0; font: inherit; color: var(--head); opacity: 0;
  background: radial-gradient(60% 55% at 50% 50%, rgba(4,8,14,.5), rgba(4,8,14,.78)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .5s ease; }
.a4-start[hidden] { display: none; }
.a4-start.a4-asleep { pointer-events: none; }
.a4-start.a4-gone { opacity: 0 !important; pointer-events: none; }
.a4-start-in { display: grid; justify-items: center; gap: 10px; transition: transform .5s ease; }
.a4-start.a4-gone .a4-start-in { transform: scale(1.08); }
.a4-start i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #e2f2fd, #7cc4f6);
  box-shadow: 0 0 0 0 rgba(127,196,246,.5), 0 0 40px rgba(127,196,246,.55); animation: a4-tap 2s ease-in-out infinite; }
.a4-start i svg { width: 24px; height: 24px; fill: #0b1117; margin: 4px 0 0 4px; }
@keyframes a4-tap { 50% { box-shadow: 0 0 0 14px rgba(127,196,246,0), 0 0 56px rgba(127,196,246,.8); transform: scale(1.04); } }
.a4-start b { font: 500 22px/1.1 var(--sans); letter-spacing: -.02em; }
.a4-start small { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a9cdf2; }
.a4-start:hover i { box-shadow: 0 0 0 6px rgba(127,196,246,.18), 0 0 60px rgba(127,196,246,.9); }
.a4-start:focus-visible { outline: 2px solid #7fdcff; outline-offset: -4px; }
.a4-locked .a4-order { filter: brightness(.6) saturate(.6); cursor: default; }
.a4-locked .a4-lead::before { animation: none; }

/* the tour: one part lit at a time, a small callout beside it pointing at it */
.a4-tip { position: absolute; z-index: 20; width: 250px; padding: 13px 15px 12px; border-radius: 13px; text-align: left;
  background: linear-gradient(165deg, rgba(36,56,82,.98), rgba(12,20,30,.98)); border: 1px solid rgba(127,220,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 30px rgba(63,157,255,.25); }
.a4-tip[hidden] { display: none; }
.a4-tip-in { animation: a4-dl .35s ease-out; }
.a4-tip::before { content: ""; position: absolute; width: 11px; height: 11px; background: inherit; border: inherit; border-width: 0 0 1px 1px; }
.a4-tip[data-side="below"]::before { top: -6px; left: calc(var(--ax, 50%) - 6px); transform: rotate(135deg); }
.a4-tip[data-side="above"]::before { bottom: -6px; left: calc(var(--ax, 50%) - 6px); transform: rotate(-45deg); }
.a4-tip[data-side="right"]::before { left: -6px; top: calc(50% - 6px); transform: rotate(45deg); }
.a4-tip-n { display: block; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a9cdf2; }
.a4-tip-t { margin: 7px 0 11px; font: 500 15.5px/1.3 var(--sans); letter-spacing: -.01em; color: var(--head); }
.a4-tip-b { display: flex; justify-content: flex-end; gap: 8px; }
.a4-tip-b button { font: 500 13px/1 var(--sans); padding: 8px 13px; border-radius: 8px; cursor: pointer; }
.a4-skip { background: none; border: 1px solid transparent; color: var(--muted); } .a4-skip:hover { color: var(--head); }
.a4-skip[hidden] { display: none; }
.a4-next { background: linear-gradient(100deg, #e2f2fd, #7cc4f6); border: 0; color: #0b1117; box-shadow: 0 0 16px rgba(127,196,246,.4); }
.a4-tip-b button:focus-visible { outline: 2px solid #7fdcff; outline-offset: 2px; }
.a4-spot { z-index: 3; animation: a4-spot 1.6s ease-in-out infinite; }
@keyframes a4-spot { 50% { box-shadow: 0 0 0 3px rgba(127,220,255,.45), 0 0 34px rgba(127,220,255,.6); } }
.a4-fig.a4-spot { animation: none; } .a4-fig.a4-spot img { opacity: 1; filter: drop-shadow(0 0 30px rgba(127,220,255,.95)) brightness(1.2); }
.a4-tally.a4-spot { border-radius: 8px; padding: 4px 8px; }
/* (the last step shows the tally where the cue was, so nothing shifts) */
.a4[data-step="3"] .a4-cue { display: none; }
.a4-touring .a4-order:not(.a4-spot), .a4-touring .a4-tile:not(.a4-spot) { filter: brightness(.7); transition: filter .3s; }

@media (prefers-reduced-motion: reduce) {
  .a4-cue, .a4-lead::before, .a4-live i, .a4-livedot, .a4-run::after { animation: none; }
  .a4-start i, .a4-spot, .a4-tip-in { animation: none; } .a4-start, .a4-start-in { transition: none; }
  .a4-pop, .a4-hit, .a4-fi, .a4-new-dl, .a4-nudge, .a4-hint, .a4-jd, .a4-fcast .a4-fl, .a4-fcast .a4-fc, .a4-isfull .a4-full { animation: none; }
  .a4-sheet, .a4-sheet.a4-in, .a4-sheet.a4-out { transition: opacity .2s; transform: translate(-50%, -50%) translateZ(90px); }
  .a4-order, .a4-order:hover { transition: none; transform: none; }
}

/* a narrower computer: the executives' columns tighter */
@media (min-width: 721px) and (max-width: 1180px) {
  .a4-dock { grid-template-columns: 168px minmax(0, 1fr) 168px; column-gap: 22px; margin-right: calc(16px - 12vw); }
  .a4-ol { font-size: 12.5px; } .a4-om { font-size: 10.5px; }
  .a4-tile small { font-size: 9px; } .a4-cal-head em { display: none; }
}

/* on a phone: the orders as big buttons above a compact dashboard, each with its executive as a small badge */
@media (max-width: 720px) {
  .a4 .act-cap { height: auto; padding-bottom: 12px; }
  .a4 .act-line { font-size: 27px; }
  .a4 .act-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
  .a4-cue { margin: 8px 0 0; font-size: 13px; padding: 6px 12px 6px 9px; }
  .a4-tally { display: inline-block; margin: 8px 0 0; font-size: 12px; }
  .a4-dock { margin: 0; padding-bottom: 0; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .a4-side, .a4-side-r, .a4-exec, .a4-orders { display: contents; }
  .a4-fig, .a4-who, .a4-oh { display: none; }
  .a4-mid { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; }
  .a4-order { grid-template-columns: 26px minmax(0, 1fr); align-items: center; column-gap: 9px; padding: 8px 10px 8px 8px; min-height: 52px; border-radius: 11px;
    opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 24px)); }
  .a4-order:hover { transform: none; }
  .a4-badge { display: block; width: 26px; height: 26px; grid-row: span 2; }
  /* (the bust in each badge fades into the ring's dark at its foot, never cut flat across the chest) */
  .a4-badge { background-size: 100% 100%, 170% auto; background-position: 0 0, center 8%; }
  .a4-b-mkt { background-image: linear-gradient(180deg, rgba(16,32,50,0) 52%, rgba(16,32,50,.95) 92%), var(--a4-sil-mkt); }
  .a4-b-dp { background-image: linear-gradient(180deg, rgba(16,32,50,0) 52%, rgba(16,32,50,.95) 92%), var(--a4-sil-dp); }
  .a4-b-cc { background-image: linear-gradient(180deg, rgba(16,32,50,0) 52%, rgba(16,32,50,.95) 92%), var(--a4-sil-cc); }
  .a4-ol { font-size: 12.5px; line-height: 1.22; }
  .a4-om { display: none; grid-column: 2; font-size: 10.5px; }
  .a4-run .a4-om, .a4-done .a4-om { display: block; }
  .a4-done .a4-ol { display: none; }
  .a4-done .a4-om::before { content: "✓ Done · "; }

  .a4-scene { height: 100%; perspective: 1100px; }
  .a4-screen { padding: 9px; }
  .a4-glass, .a4-scrim { border-radius: 18px; }
  .a4-bar { gap: 10px; padding: 0 2px 8px; } .a4-mark { font-size: 10px; letter-spacing: .32em; } .a4-biz { font-size: 9.5px; } .a4-live { font-size: 8.5px; } .a4-ex { font-size: 8.5px; padding: 3px 6px; }
  .a4-tiles { grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
  .a4-tile { padding: 7px 8px; border-radius: 10px; }
  .a4-leads, .a4-revs, .a4-calls, .a4-views { grid-column: span 3; grid-row: 1; }
  .a4-tile small { font-size: 7.5px; letter-spacing: .08em; }
  /* (the figures' short names, so they fit a quarter of a phone) */
  .a4-tile small[data-s] { font-size: 0; } .a4-tile small[data-s]::before { content: attr(data-s); font-size: 7.5px; }
  .a4-live { display: none; } .a4-biz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .a4-ex { margin-left: auto; }
  .a4-big { font-size: 16px; margin: 4px 0 0; } .a4-st { display: none; }
  .a4-bars, .a4-seg, .a4-leads p, .a4-revs p, .a4-calls p, .a4-views p { display: none; }
  .a4-cal { grid-column: 1 / -1; grid-row: 2; padding: 8px; }
  .a4-th { gap: 6px; margin-bottom: 5px; } .a4-th small { min-width: 0; } .a4-th b { font-size: 12px; } .a4-meter { width: 40px; } .a4-full { font-size: 7.5px; padding: 3px 6px; }
  .a4-cal-head, .a4-cal-grid { grid-template-columns: 24px repeat(6, minmax(0, 1fr)); gap: 3px; }
  .a4-cal-head span { font-size: 9px; } .a4-cal-head em { display: none; } .a4-hours span { font-size: 6.5px; padding-right: 1px; }
  .a4-job { left: 1px; right: 1px; padding: 1px 3px; border-radius: 4px; } .a4-job span, .a4-job small { display: none; } .a4-job b { font-size: 7px; }
  .a4-new { border-left-width: 2px; }
  .a4-cal-dl { display: none; }
  .a4-rev { grid-column: 1 / 6; grid-row: 3; } .a4-feed { grid-column: 6 / -1; grid-row: 3; }
  .a4-rev .a4-th { display: block; } .a4-rev .a4-th b { display: block; margin-top: 3px; font-size: 14px; }
  .a4-line, .a4-rv-foot { display: none; }
  .a4-fc { margin-top: 3px !important; gap: 3px; } .a4-fc b { font-size: 10.5px; } .a4-fc span { font-size: 7px; } .a4-exs { padding: 1px 3px; }
  .a4-feed { height: 74px; } .a4-feed .a4-th { margin-bottom: 4px; } .a4-wait { display: none; }
  .a4-log { gap: 4px; } .a4-fi { grid-template-columns: 5px minmax(0, 1fr); gap: 5px; } .a4-fi time, .a4-fi small { display: none; } .a4-fd { width: 5px; height: 5px; margin-top: 3px; }
  .a4-fi p { font-size: 9px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .a4-jd { width: 170px; padding: 8px 10px; }

  .a4-start { height: 100%; border-radius: 18px; } .a4-start i { width: 54px; height: 54px; } .a4-start b { font-size: 19px; }
  .a4-tip { width: min(260px, calc(100vw - 60px)); padding: 11px 13px 10px; } .a4-tip-t { font-size: 14px; margin: 5px 0 9px; }
  .a4-ready { font-size: 10.5px; }
  .a4-sheet { width: 94%; gap: 9px; padding: 12px 13px; border-radius: 14px; }
  .a4-sh-h .a4-badge { width: 30px; height: 30px; } .a4-sh-h small { font-size: 8.5px; } .a4-sh-h b { font-size: 15px; margin-top: 2px; }
  .a4-steps { gap: 5px; } .a4-steps li { font-size: 11px; grid-template-columns: 16px 1fr; gap: 7px; } .a4-steps li i, .a4-steps svg { width: 15px; height: 15px; }
  .a4-pv { padding: 7px 9px; } .a4-sms p { font-size: 10.5px; padding: 6px 8px; } .a4-sms small { font-size: 8.5px; margin-bottom: 4px; }
  .a4-plan b { font-size: 17px; } .a4-cbl { font-size: 10.5px; } .a4-cbl b { min-width: 62px; }
  .a4-sh-f { padding-top: 8px; } .a4-sh-f b { font-size: 11px; }
}
/* a short phone: the six orders three across (each executive's badge in its corner), the lede line dropped, so the
   calendar keeps its room */
@media (max-width: 720px) and (max-height: 760px) {
  .a4 .act-line { font-size: 24px; } .a4-lede { display: none; } .a4-cue, .a4-tally { margin-top: 2px; }
  .a4-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; }
  .a4-mid { grid-row: 3; margin-top: 4px; }
  .a4-order { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; padding: 7px 8px; row-gap: 3px; }
  .a4-badge { position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; }
  .a4-ol { font-size: 11.5px; padding-right: 10px; } .a4-om { grid-column: 1; font-size: 9.5px; }
  .a4-big { font-size: 14px; } .a4-rev .a4-th b { font-size: 12px; }
  .a4-feed { height: 60px; } .a4-tiles { gap: 5px; } .a4-bar { padding-bottom: 6px; }
}