/* The helpers (cx-helpers.js), every device's: the card asking for PLAY, FIRST STEPS, TRY and SHOW ME's light, made once
   from the first device to have them (1 Nov 2026), in the frame's look (--cxf-*). A device places them (the card over its picture, FIRST STEPS
   where its page has a column or a corner, TRY under its picture); --cxh-card-shift moves the card sideways, where names
   down the picture's left side need the room, and --cxh-card-room keeps it that far inside the picture. */

/* the card asking for PLAY: plain words over a picture not yet drawn, a box over one that is */
.cxh-card{position:absolute;left:calc(50% + var(--cxh-card-shift, 0px));top:50%;z-index:3;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:calc(100% - var(--cxh-card-room, 48px));box-sizing:border-box;
  margin:0;padding:20px 24px;text-align:center;color:var(--cxf-muted)}
.cxh-card[hidden]{display:none}
.cxh-card.cxh-box{border:1px solid #ffffff17;border-radius:8px;background:var(--cxf-glass);box-shadow:0 20px 60px #0000008c;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cxh-card-line{margin:0;font:800 22px/1.15 var(--cxf-sans);letter-spacing:-.02em;color:var(--cxf-ink);text-wrap:balance}
.cxh-play{display:inline-flex;align-items:center;gap:10px;min-height:40px;margin:0;padding:0 18px 0 15px;border:0;border-radius:3px;
  background:var(--cxf-accent);color:var(--cxf-on-accent);font:10px/1 var(--cxf-mono);letter-spacing:.14em;cursor:pointer;
  box-shadow:0 0 24px var(--cxf-accent-line)}
.cxh-play[hidden]{display:none}
.cxh-play svg{width:12px;height:12px;flex:none}
.cxh-card .cxh-other{margin:0;padding:2px 0;border:0;background:none;color:var(--cxf-muted);font:12.5px/1.4 var(--cxf-sans);
  text-decoration:underline;text-decoration-color:var(--cxf-accent-line);text-underline-offset:3px;cursor:pointer}
/* pointed at, its orange and its words kept, above a page's own rules for every button pointed at (Matter / Field's a faint
   wash, Polite Disorder's the colour it inherits: Cyrus, of the card on Matter / Field's preview, "rollover bug") */
@media (hover:hover){.cxh-card .cxh-play:hover:not(:disabled){background:var(--cxf-accent);color:var(--cxf-on-accent);filter:brightness(1.08)}
  .cxh-card .cxh-other:hover:not(:disabled){background:none;color:var(--cxf-ink)}}

/* FIRST STEPS: each lit as it is done, the next marked; put away with its x, or once all are done */
.cxh-steps[hidden]{display:none}
.cxh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;font:9px/1 var(--cxf-mono);
  letter-spacing:.16em;color:var(--cxf-muted)}
.cxh-close{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-8px -6px -8px 0;padding:0;border:0;
  border-radius:50%;background:none;color:var(--cxf-quiet);cursor:pointer}
.cxh-close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.cxh-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.cxh-list[hidden]{display:none}
.cxh-list button{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:40px;margin:0;
  padding:4px 8px 4px 6px;border:0;border-radius:3px;background:none;color:var(--cxf-muted);text-align:left;cursor:pointer}
.cxh-list i{display:inline-grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border-radius:3px;border:1px solid var(--cxf-line-2);
  font:9px/1 var(--cxf-mono);font-style:normal;color:var(--cxf-muted)}
.cxh-list span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cxh-list b{font:10px/1.1 var(--cxf-mono);font-weight:400;letter-spacing:.12em;color:var(--cxf-ink)}
.cxh-list small{font:11.5px/1.3 var(--cxf-sans);color:var(--cxf-quiet)}
.cxh-list .is-next{background:var(--cxf-accent-soft)}
.cxh-list .is-next i{border-color:var(--cxf-accent);color:var(--cxf-accent);animation:cxh-next 1.8s ease-in-out infinite}
.cxh-list .is-done b{color:var(--cxf-quiet)}
.cxh-list .is-done i{position:relative;border-color:var(--cxf-accent);background:var(--cxf-accent);color:transparent}
.cxh-list .is-done i::after{content:'';position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--cxf-on-accent);
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
@keyframes cxh-next{50%{box-shadow:0 0 0 4px var(--cxf-accent-line)}}
.cxh-done{margin:4px 0 0;font:12.5px/1.45 var(--cxf-sans);color:var(--cxf-muted)}
.cxh-done[hidden]{display:none}
@media (hover:hover){.cxh-list button:hover{background:#ffffff08}.cxh-list button:hover b{color:#fff}.cxh-close:hover{color:var(--cxf-ink)}}
@media (pointer:coarse){.cxh-list button{min-height:48px}.cxh-close{width:40px;height:40px;margin:-14px -12px -14px 0}}

/* TRY under the picture: a thing to try and SHOW ME, or the device's own words in its place */
.cxh-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:46px;margin:0;padding:8px 18px 8px var(--cxf-pad, 24px);
  border-top:1px solid var(--cxf-line);box-sizing:border-box;font:12.5px/1.45 var(--cxf-sans);color:var(--cxf-muted)}
.cxh-try[hidden]{display:none}
.cxh-try-k{flex:none;font:9px/1 var(--cxf-mono);letter-spacing:.16em;color:var(--cxf-accent)}
.cxh-try-words{flex:1 1 280px;min-width:0}
.cxh-try.cxh-own .cxh-try-words{color:var(--cxf-ink)}
.cxh-try-acts{display:inline-flex;flex-wrap:wrap;gap:6px}
.cxh-try-acts button{min-height:28px;margin:0;padding:0 10px;border:1px solid var(--cxf-accent-line);border-radius:3px;background:none;
  color:var(--cxf-accent);font:9.5px/1 var(--cxf-mono);letter-spacing:.1em;cursor:pointer;white-space:nowrap}
/* pointed at, a wash of the accent and its words kept in it, above a page's own rules for every button pointed at (as the
   card's PLAY keeps its own: Polite Disorder's gives a pointed button the colour it inherits, which turned SHOW ME grey) */
@media (hover:hover){.cxh-try .cxh-try-acts button:hover:not(:disabled){background:var(--cxf-accent-soft);color:var(--cxf-accent)}}
@media (pointer:coarse){.cxh-try-acts button{min-height:40px}}
/* where a finger points, the helpers' smallest words at 10 px, as the frame's, the SONG window's and the master chain's
   are (2 Nov 2026, Polite Disorder's session's find, measured by touch on all four devices): FIRST STEPS, a step's
   number, TRY and SHOW ME; nothing changed with a mouse */
@media (pointer:coarse){.cxh-head,.cxh-list i,.cxh-try-k,.cxh-try-acts button{font-size:10px}}

/* SHOW ME: what it points at lit for a moment, a ring that fades; still under reduced motion */
.cxh-shown{animation:cxh-shown 2.4s ease-out;border-radius:4px}
@keyframes cxh-shown{0%,30%{box-shadow:0 0 0 2px var(--cxf-accent),0 0 0 9px var(--cxf-accent-soft)}100%{box-shadow:0 0 0 2px transparent,0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){.cxh-shown{animation:none;box-shadow:0 0 0 2px var(--cxf-accent)}.cxh-list .is-next i{animation:none}}

/* a phone: the card over a drawn picture PLAY and the other way in alone, so most of the picture shows round it; FIRST
   STEPS two to a row, their words alone */
@media (max-width:599px){
  .cxh-card{padding:12px 14px;gap:8px}
  .cxh-card.cxh-box .cxh-card-line,.cxh-play-more{display:none}
  .cxh-card-line{font-size:18px}
  .cxh-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
  .cxh-list small{display:none}
}