/* Revenue Micro-Sources experiment — sticky sizing, board and media queries */

.rev-body{background:#f2f0e9}
.rev-body *{box-sizing:border-box}

.model-note{margin-top:28px;max-width:540px;padding:18px;border:1px solid #1b2fd6;color:#1b2fd6}
.model-note b{display:block;font:700 24px/.98 'Oswald',sans-serif;text-transform:uppercase;text-wrap:pretty}
.model-note span{display:block;margin-top:13px;max-width:490px;font:500 13px/1.55 'IBM Plex Sans',sans-serif;color:#34322f}
.rights-atlas{padding:80px 5vw;border-top:1px solid #0e0e14;border-bottom:1px solid #0e0e14;background:#0e0e14;color:#fff}
.atlas-label{font:700 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#e8ff2e;text-transform:uppercase}
.rights-atlas h2{margin:26px 0 24px;max-width:780px;font:700 clamp(46px,5vw,80px)/.92 'Oswald',sans-serif;text-transform:uppercase;text-wrap:pretty}
.rights-atlas>p{margin:0;max-width:720px;font-size:17px;line-height:1.6;color:#d7d5cc}
.atlas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:42px;border-top:1px solid rgba(255,255,255,.45);border-left:1px solid rgba(255,255,255,.45)}
.atlas-grid>div{display:flex;min-height:210px;flex-direction:column;padding:22px;border-right:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45)}
.atlas-grid strong{font:700 19px/1.15 'Oswald',sans-serif;text-transform:uppercase}
.atlas-grid span{display:block;margin-top:18px;font-size:14px;line-height:1.5}
.atlas-grid b{display:block;margin-top:auto;padding-top:22px;font:700 9px/1.3 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#e8ff2e}

/* --mdr-header is kept in sync with the real header height by revenue-micro.js */
.rev-chart-col{position:sticky;top:var(--mdr-header,69px);height:calc(100vh - var(--mdr-header,69px))}

.micro-list{margin-top:26px;max-width:520px;border-top:1px solid #0e0e14}
.rev-steps>[data-step].micro-layer{justify-content:flex-start!important;padding-top:80px!important;padding-bottom:80px!important}
.micro-source{min-height:88vh;display:flex;flex-direction:column;justify-content:center;opacity:.38;transition:opacity .35s ease;border-bottom:1px solid rgba(14,14,20,.16)}
.micro-source.is-active{opacity:1}
.micro-source:last-child{border-bottom:0}
.micro-row{display:flex;justify-content:space-between;gap:14px;padding:14px 0 5px;font:700 12px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.micro-row b{color:#1b2fd6}
.micro-list p{margin:0 0 12px;max-width:520px;font-size:15px;line-height:1.58;color:#3f3d38;border-bottom:1px solid rgba(14,14,20,.15);padding-bottom:18px}
.micro-list p:last-child{border-bottom:0}
.micro-theory,.micro-proof{display:block;margin-top:14px;padding:13px 14px;border-left:4px solid #1b2fd6;background:rgba(27,47,214,.07);font:500 11px/1.58 'IBM Plex Mono',monospace;color:#1d1c1a}
.micro-proof{border-left-color:#e8ff2e;background:rgba(232,255,46,.26)}
.micro-theory b,.micro-proof b{margin-right:7px;font-weight:700;color:#1b2fd6}
.micro-blackbox{display:block;margin-top:14px;padding:13px 14px;border-left:4px solid #ff674d;background:rgba(255,103,77,.12);font:500 11px/1.58 'IBM Plex Mono',monospace;color:#1d1c1a}
.micro-blackbox b{margin-right:7px;font-weight:700;color:#c73a20}

.tetris-hud{width:min(440px,86%);display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.65);background:#1b2fd6;color:#fff}
.tetris-hud>div{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:10px 12px}
.tetris-hud>div+div{border-left:1px solid rgba(255,255,255,.65)}
.tetris-hud span{font:700 9px/1.3 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#e8ff2e}
.tetris-hud b{font:700 24px/1 'Oswald',sans-serif;text-transform:uppercase}
.tetris-hud [data-active-layer]{max-width:160px;font-size:16px;text-align:right;overflow-wrap:normal}
.tetris-shell{--board-w:min(25vh,260px);position:relative;flex-shrink:0;width:var(--board-w);height:calc(var(--board-w) * 2);border:2px solid #fff;background:#1225b4;box-shadow:10px 10px 0 #e8ff2e}
.tetris-inner{position:absolute;inset:0;overflow:hidden}
.tetris-world{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:10% calc(100% / 20)}
.t-piece{position:absolute;inset:0;opacity:0;transform:translateY(-110vh) rotate(var(--tilt,0deg));z-index:2;pointer-events:none;--pf:drop-shadow(1px 0 #1225b4) drop-shadow(-1px 0 #1225b4) drop-shadow(0 1px #1225b4) drop-shadow(0 -1px #1225b4);filter:var(--pf)}
.t-piece.landed{opacity:1;animation:tetris-drop var(--speed,.58s) cubic-bezier(.18,.72,.2,1.14) both;animation-delay:var(--delay,0ms);pointer-events:auto;cursor:crosshair}
.t-piece.landed.dim{opacity:.28;transition:opacity .4s}
.t-piece.landed:hover{z-index:7;opacity:1}
.t-piece.landed:hover .t-cell{outline:2px solid #fff;outline-offset:-2px}
.t-cell{position:absolute;box-sizing:border-box;width:calc(10% - 2px);height:calc(100% / 20 - 2px);left:calc(var(--x) * 10% + 1px);bottom:calc(var(--y) * 100% / 20 + 1px);background:var(--piece-color);border:1px solid rgba(14,14,20,.78)}
.t-cell::after{content:"";position:absolute;inset:2px;border-top:1px solid rgba(255,255,255,.48);border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(14,14,20,.2);border-bottom:1px solid rgba(14,14,20,.28)}
.tetris-flash{position:absolute;inset:0;background:#e8ff2e;opacity:0;z-index:5;pointer-events:none}
.tetris-flash.hit{animation:board-flash .28s steps(2,end)}
.tetris-scan{position:absolute;left:0;right:0;height:3px;top:-3px;background:#e8ff2e;box-shadow:0 0 12px #e8ff2e;opacity:0;z-index:6;pointer-events:none}
.tetris-scan.active{opacity:.85;animation:scan 1.15s linear infinite}
.tetris-readout{display:flex;width:min(25vh,260px);min-height:16px;font:700 9px/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#e8ff2e;text-transform:uppercase;justify-content:space-between;gap:10px}
.rev-legend{max-height:480px;opacity:1;overflow:hidden}
.rev-legend [data-leg]{display:flex;justify-content:space-between;gap:16px;font:600 11px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;border-top:1px solid rgba(255,255,255,.5);padding:10px 2px;opacity:.15;transition:opacity .4s}
.rev-legend [data-leg]:last-of-type{border-bottom:1px solid rgba(255,255,255,.5)}
.rev-legend [data-leg] span{display:flex;align-items:center;gap:10px}
.rev-legend [data-leg] i{width:11px;height:11px;display:inline-block}
.sub-leg{display:none;flex-direction:column}
.sub-leg.open{display:flex}
.sub-leg div{display:flex;justify-content:space-between;gap:12px;font:600 9px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;padding:5px 2px 5px 21px;color:rgba(255,255,255,.85)}
.sub-leg div.is-active{color:#e8ff2e;background:rgba(232,255,46,.1)}
@keyframes tetris-drop{0%{opacity:1;transform:translateY(-110vh) rotate(var(--tilt,0deg));filter:var(--pf,none)}70%{transform:translateY(10px) rotate(0);filter:var(--pf,none)}78%{transform:translateY(2px) rotate(0);filter:var(--pf,none) brightness(2.1)}86%{transform:translateY(-6px) rotate(0);filter:var(--pf,none) brightness(1.3)}100%{opacity:1;transform:translateY(0) rotate(0);filter:var(--pf,none)}}
@keyframes board-flash{0%,100%{opacity:0}50%{opacity:.22}}
@keyframes scan{to{top:100%}}

@media(max-width:860px){
  .rev-grid{grid-template-columns:1fr!important}
  .rev-steps{border-right:0!important}
  .rev-steps>div{min-height:56vh!important}
  .rev-steps>[data-step].micro-layer{padding-top:40px!important;padding-bottom:40px!important}
  .micro-source{min-height:78vh}
  .rights-atlas{padding:64px 5vw}
  .atlas-grid{grid-template-columns:1fr}
  .atlas-grid>div{min-height:185px}
  .rights-atlas h2{font-size:clamp(42px,13vw,64px)}
  .rev-chart-col{order:-1;z-index:10;height:auto;flex-direction:row!important;flex-wrap:wrap;justify-content:center!important;gap:8px!important;padding:8px 4vw!important;border-bottom:1px solid #0e0e14}
  .tetris-hud{width:100%;order:0}
  .tetris-hud>div{padding:6px 9px}
  .tetris-hud b{font-size:18px}
  .tetris-shell{--board-w:min(22vw,100px);box-shadow:5px 5px 0 #e8ff2e;order:1}
  .tetris-readout{display:none!important}
  .rev-legend{min-width:0!important;flex:1;gap:0!important}
  .rev-legend [data-leg]{padding:4px 2px!important;font-size:8px!important}
  .sub-leg div{padding:3px 2px 3px 14px;font-size:7px}
}

@media(prefers-reduced-motion:reduce){.t-piece.landed{animation:none;opacity:1;transform:none}.t-piece.landed.dim{opacity:.28}.tetris-scan{display:none}}