/*
  Connected venues & middleware graphic (templates/_graphics/middleware.twig): a
  member's checkout, the middleware hub, the venue's own systems stacked on the
  right, the result card, the pointer and the success burst. Colours come from
  the tokens in graphics.css.
*/

/* The checkout page */
[data-g17-graphic="middleware"] .g17g-mw-co { padding: 0; overflow: hidden; }
[data-g17-graphic="middleware"] .g17g-mw-site { display: flex; align-items: center; justify-content: space-between; gap: .5em; height: 2.4em; padding: 0 1em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="middleware"] .g17g-mw-logo { display: flex; align-items: center; gap: .45em; font-size: .7em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-logo i { width: 1.3em; height: 1.3em; border-radius: .35em; background: var(--g17g-purple); box-shadow: inset 0 -.42em 0 var(--g17g-green); }
[data-g17-graphic="middleware"] .g17g-mw-crumb { display: flex; gap: .9em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-crumb b { color: var(--g17g-text); }

/* One account, shown as a flat purple band */
[data-g17-graphic="middleware"] .g17g-mw-acct { padding: .7em 1em .65em; background: var(--g17g-purple); color: var(--g17g-on-green); }
[data-g17-graphic="middleware"] .g17g-mw-acct__row { display: flex; align-items: center; gap: .6em; }
[data-g17-graphic="middleware"] .g17g-mw-acct .g17g-av { width: 2.3em; height: 2.3em; font-size: .7em; }
[data-g17-graphic="middleware"] .g17g-mw-acct__text { flex: 1; min-width: 0; }
[data-g17-graphic="middleware"] .g17g-mw-acct__text b { display: block; font-size: .82em; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-acct__text span { display: block; margin-top: .1em; font-size: .58em; opacity: .85; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-venues { display: flex; align-items: center; gap: .3em; margin-top: .55em; padding-top: .5em; border-top: 1px solid var(--g17g-purple-soft); }
[data-g17-graphic="middleware"] .g17g-mw-venues span { flex: 1; font-size: .58em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-venues i { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--g17g-card); color: var(--g17g-purple-text); }
[data-g17-graphic="middleware"] .g17g-mw-venues svg { width: 64%; height: 64%; }
[data-g17-graphic="middleware"] .g17g-mw-pill { flex: none; padding: .3em .7em; border-radius: 999px; background: var(--g17g-card); color: var(--g17g-purple-text); font-size: .58em; font-weight: 700; white-space: nowrap; }

/* The basket */
[data-g17-graphic="middleware"] .g17g-mw-body { padding: .65em 1em .9em; }
[data-g17-graphic="middleware"] .g17g-mw-sec { display: flex; justify-content: space-between; margin-bottom: .25em; font-size: .64em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-sec span { font-weight: 500; color: var(--g17g-faint); }
[data-g17-graphic="middleware"] .g17g-mw-item { display: flex; align-items: center; gap: .6em; padding: .32em 0; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="middleware"] .g17g-mw-ico { flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .6em; }
[data-g17-graphic="middleware"] .g17g-mw-ico svg { width: 56%; height: 56%; }
[data-g17-graphic="middleware"] .g17g-mw-item .g17g-mw-ico { width: 1.8em; height: 1.8em; }
[data-g17-graphic="middleware"] .g17g-mw-item__text { flex: 1; min-width: 0; }
[data-g17-graphic="middleware"] .g17g-mw-item__text b { display: block; font-size: .68em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-item__text span { display: block; margin-top: .1em; font-size: .56em; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-price { flex: none; font-size: .66em; font-weight: 700; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: .45em; font-size: .64em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-total strong { font-size: 1.6em; color: var(--g17g-text); letter-spacing: -.02em; }
/* How to pay: five neutral options, the chosen one in green */
[data-g17-graphic="middleware"] .g17g-mw-sec--pay { margin: .75em 0 .4em; }
[data-g17-graphic="middleware"] .g17g-mw-pms { display: flex; flex-wrap: wrap; gap: 0 .35em; }
[data-g17-graphic="middleware"] .g17g-mw-break { flex-basis: 100%; height: .35em; }
[data-g17-graphic="middleware"] .g17g-mw-pm {
    position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .4em;
    height: 2.5em; padding: 0 .75em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g17g-border);
    font-size: .56em; font-weight: 600; color: var(--g17g-text-soft); white-space: nowrap;
}
[data-g17-graphic="middleware"] .g17g-mw-pm > svg { position: relative; z-index: 1; flex: none; width: 1.3em; height: 1.3em; color: var(--g17g-muted); }
[data-g17-graphic="middleware"] .g17g-mw-pm > span { position: relative; z-index: 1; }
[data-g17-graphic="middleware"] .g17g-mw-pm__on { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--g17g-green-tint); box-shadow: inset 0 0 0 2px var(--g17g-green); }
[data-g17-graphic="middleware"] .g17g-mw-co .g17g-btn { margin-top: .75em; }

/* The middleware hub, which glows only while it routes */
[data-g17-graphic="middleware"] .g17g-mw-hub { z-index: 3; display: flex; flex-direction: column; align-items: center; padding: .85em .4em .8em; }
[data-g17-graphic="middleware"] .g17g-mw-glow { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .45em var(--g17g-green-bg), inset 0 0 0 1.5px var(--g17g-green); opacity: 0; pointer-events: none; }
[data-g17-graphic="middleware"] .g17g-mw-core { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--g17g-green); }
[data-g17-graphic="middleware"] .g17g-mw-core svg { width: 58%; height: 58%; }
[data-g17-graphic="middleware"] .g17g-mw-hub__t { margin-top: .55em; font-size: .72em; letter-spacing: -.01em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-hub__s { display: grid; justify-items: center; margin-top: .2em; font-size: .56em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-hub__s > span { grid-area: 1 / 1; color: var(--g17g-muted); }
[data-g17-graphic="middleware"] .g17g-mw-hub__s > [data-hub="routing"], [data-g17-graphic="middleware"] .g17g-mw-hub__s > [data-hub="done"] { color: var(--g17g-green-text); }

/* The venue's own systems */
[data-g17-graphic="middleware"] .g17g-mw-over { position: absolute; z-index: 2; font-size: .6em; font-weight: 600; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-sys { display: flex; align-items: center; gap: .6em; padding: .55em .65em; border-radius: .95em; }
[data-g17-graphic="middleware"] .g17g-mw-sys__text { flex: 1; min-width: 0; }
[data-g17-graphic="middleware"] .g17g-mw-sys__text b { display: block; font-size: .7em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-st { display: grid; justify-items: start; margin-top: .15em; font-size: .58em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-st > span { grid-area: 1 / 1; color: var(--g17g-faint); }
[data-g17-graphic="middleware"] .g17g-mw-st > .g17g-mw-st__done { font-weight: 600; color: var(--g17g-green-text); }
[data-g17-graphic="middleware"] .g17g-mw-tick { flex: none; width: 1.25em; height: 1.25em; }
[data-g17-graphic="middleware"] .g17g-mw-tick svg { width: 100%; height: 100%; }

/* The result, with a count that rolls up */
[data-g17-graphic="middleware"] .g17g-mw-toast { z-index: 5; display: flex; align-items: center; gap: .65em; padding: .6em 1.15em .6em .6em; border-radius: 1em; }
[data-g17-graphic="middleware"] .g17g-mw-num { flex: none; position: relative; width: 1.95em; height: 1.95em; overflow: hidden; border-radius: .55em; background: var(--g17g-green); color: var(--g17g-on-green); font-size: 1.1em; font-weight: 700; }
[data-g17-graphic="middleware"] .g17g-mw-num__col { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(-83.3333%); }
[data-g17-graphic="middleware"] .g17g-mw-num__col span { display: block; height: 1.95em; line-height: 1.95em; text-align: center; }
[data-g17-graphic="middleware"] .g17g-mw-toast__t { display: block; font-size: .78em; white-space: nowrap; }
[data-g17-graphic="middleware"] .g17g-mw-toast__s { display: block; margin-top: .1em; font-size: .6em; color: var(--g17g-muted); white-space: nowrap; }

/* Layers that fill the stage: the pointer and the burst */
[data-g17-graphic="middleware"] .g17g-mw-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
[data-g17-graphic="middleware"] .g17g-mw-cursor svg { position: absolute; left: -.32em; top: -.2em; width: 1.55em; height: 1.55em; color: var(--g17g-text); filter: drop-shadow(0 .15em .25em var(--g17g-shadow)); }
[data-g17-graphic="middleware"] .g17g-mw-ring { position: absolute; left: -.9em; top: -.9em; width: 1.8em; height: 1.8em; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }
[data-g17-graphic="middleware"] .g17g-mw-burst { z-index: 7; }
[data-g17-graphic="middleware"] .g17g-mw-burst i { position: absolute; left: -.22em; top: -.22em; width: .44em; height: .44em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="middleware"] .g17g-mw-burst i:nth-child(even) { background: var(--g17g-purple); }