/* Signals' own rules (template-parts/demo-signals.php), loaded after demo.css by inc/demo.php (GS_DEMO_PIECE_STYLES).
   Every rule is scoped to .gsd.gsd-v-signals, the piece and its stills, so the full window never reads this file.
   What it draws: the post's play line (every play on: liked, then commented, in the words of the feed's done head)
   and the table's Plays tab for part=plays (gs.front.app route/playtableDetail component/plays, PlaysList and
   plays.module.scss: the group in caps, the tile washed with the group's tone, the name, what it does, where it
   stands). */

/* ---- the post's play line: it grows in under the words when the play likes the post, its top rule inside it, so
   nothing is drawn while it is closed ----------------------------------------------------------------------------- */
.gsd.gsd-v-signals .gsd-postc>.gsd-sgh{border-top:0}
.gsd.gsd-v-signals .gsd-sgh .gsd-gi>*{margin-top:0}
.gsd.gsd-v-signals .gsd-sgh .gsd-sec{border-top:1px solid var(--gsd-line2)}
.gsd.gsd-v-signals .gsd-sgh .gsd-hd[data-gsd-hl]{border-radius:8px;outline-offset:5px}
.gsd.gsd-v-signals .gsd-sgh .gsd-hd[data-gsd-hl]::before{inset:-5px;border-radius:12px}
/* the post's words never leave ...more alone on a line */
.gsd.gsd-v-signals .gsd-ptx{text-wrap:pretty}

/* ---- the Plays tab (part=plays) ---------------------------------------------------------------------------------- */
.gsd.gsd-v-signals .gsd-py .gsd-ph{gap:12px}
.gsd.gsd-v-signals .gsd-py .gsd-pt{flex:none}
.gsd.gsd-v-signals .gsd-py .gsd-pt>svg{color:var(--gsd-mute)}
.gsd.gsd-v-signals .gsd-py-tb{min-width:0;margin-left:auto;font:400 12.5px/1.2 var(--gsd-sans)}
.gsd.gsd-v-signals .gsd-py-tb>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-signals .gsd-py-b{padding:14px 18px 18px}
.gsd.gsd-v-signals .gsd-py-l{overflow:hidden;border:1px solid var(--gsd-line);border-radius:12px;background:var(--gsd-bg)}
/* a group's caps, on the list's soft band (the playbook's group titles) */
.gsd.gsd-v-signals .gsd-py-g{padding:7px 14px 6px;border-bottom:1px solid var(--gsd-line2);background:var(--gsd-soft);font:600 10.5px/1.3 var(--gsd-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--gsd-mute)}
.gsd.gsd-v-signals .gsd-py-r+.gsd-py-g{border-top:1px solid var(--gsd-line2)}
/* a play: its tile, its name over what it does, where it stands */
.gsd.gsd-v-signals .gsd-py-r{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 14px}
.gsd.gsd-v-signals .gsd-py-tl{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--gsd-pyt);background:color-mix(in srgb,var(--gsd-pyt) 12%,var(--gsd-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gsd-pyt) 20%,transparent)}
.gsd.gsd-v-signals .gsd-py-tl svg{width:17px;height:17px}
.gsd.gsd-v-signals .gsd-py-mo{--gsd-pyt:var(--gsd-warn)}
.gsd.gsd-v-signals .gsd-py-so{--gsd-pyt:var(--gsd-ok)}
.gsd.gsd-v-signals .gsd-py-we{--gsd-pyt:var(--gsd-ai)}
.gsd.gsd-v-signals .gsd-py-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-signals .gsd-py-tx b{font:600 13.5px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-signals .gsd-py-tx>span{font:400 12.5px/1.45 var(--gsd-sans);color:var(--gsd-text);text-wrap:pretty}
.gsd.gsd-v-signals .gsd-py-tx em{margin-left:6px;font:400 12px/1.45 var(--gsd-sans);font-style:normal;color:var(--gsd-mute);white-space:nowrap}
.gsd.gsd-v-signals .gsd-py-st{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1.2 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd.gsd-v-signals .gsd-py-st>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gsd-info);box-shadow:0 0 0 3px color-mix(in srgb,var(--gsd-info) 16%,transparent)}
/* a marked play: the ring inside the list's edge, the tint under its row */
.gsd.gsd-v-signals .gsd-py-r[data-gsd-hl]{position:relative;isolation:isolate;box-shadow:inset 0 0 0 1.5px var(--gsd-hl);background:var(--gsd-hl-tint)}

/* a still from 420 px of pane: the step up every still takes, 13 px and more */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-signals .gsd-py-tb{font-size:13px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-g{font-size:11px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-tx b{font-size:14.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-tx>span,.gsd.gsd-still.gsd-v-signals .gsd-py-st{font-size:13px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-tx em{font-size:12.5px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-r{padding:13px 16px}
  .gsd.gsd-still.gsd-v-signals .gsd-py-g{padding-left:16px;padding-right:16px}
}
/* a phone: where a play stands goes under what it does */
@container gsd (max-width:479px){
  .gsd.gsd-v-signals .gsd-py-b{padding:12px 12px 14px}
  .gsd.gsd-v-signals .gsd-py-r{grid-template-columns:34px minmax(0,1fr);align-items:start;padding:11px 12px}
  .gsd.gsd-v-signals .gsd-py-st{grid-column:2;margin-top:4px;font-size:12px}
  .gsd.gsd-v-signals .gsd-py-g{padding-left:12px;padding-right:12px}
  .gsd.gsd-v-signals .gsd-py-tx>span{font-size:12.5px}
}

/* the name line on a phone: the stage takes its own place after the role, its ring the separator, so no dot is left
   at a line's end */
@container gsd (max-width:599px){
  .gsd.gsd-v-signals .gsd-nl>i:nth-of-type(2){display:none}
}
/* a phone, live too: a comment's byline keeps the play's name whole, on a second line if it must */
@container gsd (max-width:419px){
  .gsd.gsd-v-signals .gsd-bh{flex-wrap:wrap}
  .gsd.gsd-v-signals .gsd-bh span{white-space:normal}
}

/* ---- the live piece: yesterday's cards under today's, a replied person's stage in the engaging hue ------------- */
.gsd.gsd-v-signals .gsd-rg-eng{--gsd-rg:#F0A23E}
.gsd.gsd-v-signals .gsd-ev-old .gsd-day{margin-top:14px}
/* live (steady), the post's play line keeps its room from the moment the post opens, so the comments under it never
   move when it lands; a still keeps it collapsed until its moment */
.gsd.gsd-v-signals:not(.gsd-still) .gsd-go .gsd-sgh[data-t]:not(.gsd-on){grid-template-rows:1fr}
/* live, a card's workflow chip changes state (Running, Paused, the workflow it moved to): the states share one cell,
   so a chip that takes two lines on a phone and one that takes one keep the card's head one height */
.gsd.gsd-v-signals:not(.gsd-still) .gsd-go .gsd-wcw{display:grid;justify-items:start}
.gsd.gsd-v-signals:not(.gsd-still) .gsd-go .gsd-wcw>.gsd-wc{grid-area:1/1}
.gsd.gsd-v-signals:not(.gsd-still) .gsd-go .gsd-wcw>.gsd-ss:not(.gsd-on){display:inline-flex;visibility:hidden}
/* a phone, live: a card's workflow chip keeps one line (the workflow and its state; the step is in the card's line
   and in the stills), so no pill breaks with its step alone on a second line */
@container gsd (max-width:419px){
  .gsd.gsd-v-signals:not(.gsd-still) .gsd-wc .gsd-wcs{display:none}
  .gsd.gsd-v-signals:not(.gsd-still) .gsd-wc{flex-wrap:nowrap;height:22px;padding:0 8px 0 6px;border-radius:999px}
  .gsd.gsd-v-signals:not(.gsd-still) .gsd-wc>span:not(.gsd-wcs){white-space:nowrap}
}