/* The AI SDR's piece (template-parts/demo-sdr.php, view=sdr live and its stills), loaded after demo.css by
   inc/demo.php. Every rule is scoped to .gsd.gsd-v-sdr, so the full window never reads this file; its own AI SDR pane
   keeps demo.css's rules. The piece is one conversation and the plan the AI SDR runs on it, drawn as the app draws
   them (gs.front.app ThreadTimeline's classified row, PlanCard with the Playbook's box, PlaybookParts' path and
   facts): the conversation on the left, the plan on the right on the inbox's soft ground; one column on a phone.
   The Playbook wears the product's teal (gs.front.app --gs-avatar-5, the demo's avatar hue 5). Nothing here moves
   the layout while the piece plays: what lands at the conversation's foot has its room from the first frame and the
   thread rises by transform, a state swaps in place, and a stage's width is the same in every state. */

.gsd.gsd-v-sdr{
  --gsd-pb:#0E9BA6;
  --gsd-pb-ink:color-mix(in srgb,var(--gsd-pb) 78%,var(--gsd-ink));
  --gsd-on-pb-ink:#fff;
  --gsd-pb-soft:color-mix(in srgb,var(--gsd-pb) 5%,var(--gsd-bg));
  --gsd-pb-line:color-mix(in srgb,var(--gsd-pb) 32%,var(--gsd-line));
  --gsd-pb-tint:color-mix(in srgb,var(--gsd-pb) 11%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .gsd.gsd-v-sdr{--gsd-pb:#2CB9C4;--gsd-pb-ink:#5FD0D8;--gsd-on-pb-ink:#0C0D10}
}
:root[data-theme=dark] .gsd.gsd-v-sdr{--gsd-pb:#2CB9C4;--gsd-pb-ink:#5FD0D8;--gsd-on-pb-ink:#0C0D10}

/* ---- the frame: the conversation, then the plan on the soft ground --------------------------------------------- */
.gsd.gsd-v-sdr .gsd-a-pb{display:grid;grid-template-columns:minmax(0,1fr) 468px}
.gsd.gsd-v-sdr .gsd-a-cv{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-side{min-width:0;min-height:0;padding:16px;background:var(--gsd-soft);overflow:hidden}

/* the thread's head: her name and role, the channel, the label the reply gets */
.gsd.gsd-v-sdr .gsd-thh>.gsd-ch{flex:none;display:inline-flex;flex-direction:row}
.gsd.gsd-v-sdr .gsd-thh .gsd-sc{margin-left:2px}

/* the messages from the foot up: the newest at the bottom, the oldest giving way under the top edge */
.gsd.gsd-v-sdr .gsd-a-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}
.gsd.gsd-v-sdr .gsd-a-mi{display:flex;flex-direction:column;padding:16px 20px 18px}
.gsd.gsd-v-sdr .gsd-a-mi>*+*{margin-top:10px}
.gsd.gsd-v-sdr .gsd-a-mi>.gsd-a-grow{margin-top:0}
.gsd.gsd-v-sdr .gsd-a-mi .gsd-note{margin-bottom:2px}
/* a day starts: its name between two hairlines, as the thread draws it */
.gsd.gsd-v-sdr .gsd-a-day{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--gsd-sans);color:var(--gsd-faint);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-day::before,.gsd.gsd-v-sdr .gsd-a-day::after{content:"";flex:1;height:1px;background:var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-mi :is(.gsd-out,.gsd-in){max-width:84%}
.gsd.gsd-v-sdr .gsd-a-mi :is(.gsd-out,.gsd-in) p{text-wrap:pretty}

/* what lands comes in at the foot. In a still, what has not landed takes no room at all (its gap is inside it); live
   (demo.js stackThread), it keeps its room, invisible, and the thread stands lower by it, then rises by transform as
   it lands, so no message ever moves in the layout and the loop's rewind lets it fade out where it stands */
.gsd.gsd-v-sdr .gsd-a-grow{display:grid;grid-template-rows:1fr}
.gsd.gsd-v-sdr .gsd-a-gi{min-height:0;overflow:hidden}
.gsd.gsd-v-sdr .gsd-a-gi>*{margin-top:10px}
.gsd.gsd-v-sdr .gsd-a-mi>.gsd-a-grow:first-child .gsd-a-gi>*{margin-top:0}
.gsd.gsd-v-sdr .gsd-go .gsd-a-grow[data-t]{transform:none;transition:grid-template-rows .55s cubic-bezier(.3,.7,.2,1),opacity .4s ease .12s}
.gsd.gsd-v-sdr .gsd-go .gsd-a-grow[data-t]:not(.gsd-on){grid-template-rows:0fr;transform:none;transition-delay:0s}
.gsd.gsd-v-sdr:not(.gsd-still) .gsd-go .gsd-a-grow[data-t]:not(.gsd-on){grid-template-rows:1fr}
.gsd.gsd-v-sdr:not(.gsd-still) .gsd-go .gsd-a-mi{transition:transform .55s cubic-bezier(.3,.7,.2,1)}

/* the classification, as the thread's row draws it: the robot, Classified as, the scenario, its confidence and time,
   the reason under it in quotes */
.gsd.gsd-v-sdr .gsd-a-cls{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 0;border-radius:14px}
.gsd.gsd-v-sdr .gsd-a-clh{display:inline-flex;align-items:center;gap:7px;max-width:100%;height:28px;padding:0 11px 0 5px;border-radius:999px;background:var(--gsd-bg);box-shadow:inset 0 0 0 1px var(--gsd-line);font:500 12px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-rb{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--gsd-ai-soft);color:var(--gsd-ai)}
.gsd.gsd-v-sdr .gsd-a-rb svg{width:12px;height:12px}
.gsd.gsd-v-sdr .gsd-a-clh .gsd-sc{height:20px}
.gsd.gsd-v-sdr .gsd-a-cf{font:500 11px/1 var(--gsd-mono);color:var(--gsd-text);font-variant-numeric:tabular-nums}
.gsd.gsd-v-sdr .gsd-a-clh time{font:400 11px/1 var(--gsd-mono);color:var(--gsd-faint)}
.gsd.gsd-v-sdr .gsd-a-why{max-width:90%;font:italic 400 12.5px/1.45 var(--gsd-sans);color:var(--gsd-mute);text-align:center;text-wrap:balance}
.gsd.gsd-v-sdr .gsd-a-why::before,.gsd.gsd-v-sdr .gsd-a-why::after{content:'"'}
.gsd.gsd-v-sdr .gsd-a-cls[data-gsd-hl]{padding:10px 12px}

/* the draft keeps the full window's card; under the reply it runs the column's width */
.gsd.gsd-v-sdr .gsd-a-draft .gsd-dt{text-wrap:pretty}

/* ---- the plan (gs.front.app PlanCard): its head, then a row per step, its kind's tile on the left -------------- */
.gsd.gsd-v-sdr .gsd-a-plan{border:1px solid var(--gsd-line);border-radius:14px;background:var(--gsd-bg);box-shadow:0 1px 2px rgba(20,21,28,.04),0 10px 24px -18px rgba(20,21,28,.18)}
.gsd.gsd-v-sdr .gsd-a-ph{display:flex;align-items:flex-start;gap:10px;padding:13px 14px 12px;border-bottom:1px solid var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-ph .gsd-aimk{width:26px;height:26px;border-radius:8px}
.gsd.gsd-v-sdr .gsd-a-ph .gsd-aimk svg{width:15px;height:15px}
.gsd.gsd-v-sdr .gsd-a-pht{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.gsd.gsd-v-sdr .gsd-a-pht b{font:600 13.5px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-a-pht small{font:400 12px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-ph .gsd-stat{height:22px;margin-top:1px;font-size:11.5px}
.gsd.gsd-v-sdr .gsd-a-steps{padding:6px 0 10px}
.gsd.gsd-v-sdr .gsd-a-steps>li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:42px;padding:6px 14px}
.gsd.gsd-v-sdr .gsd-a-tl{display:grid;place-items:center;width:26px;height:26px;border-radius:8px}
.gsd.gsd-v-sdr .gsd-a-tl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gsd.gsd-v-sdr .gsd-a-tl .gsd-a-dot{fill:currentColor;stroke:none}
.gsd.gsd-v-sdr .gsd-a-tl-li{background:var(--gsd-li-soft);color:var(--gsd-li)}
.gsd.gsd-v-sdr .gsd-a-tl-crm{background:var(--gsd-ok-soft);color:var(--gsd-ok-ink)}
.gsd.gsd-v-sdr .gsd-a-tl-pb{background:var(--gsd-pb);color:#fff}
.gsd.gsd-v-sdr .gsd-a-sn{display:flex;flex-direction:column;gap:2px;min-width:0;font:500 13px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-a-sn small{font:400 11.5px/1.25 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-steps>li>time{font:400 11.5px/1 var(--gsd-mono);color:var(--gsd-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.gsd.gsd-v-sdr .gsd-a-stg{display:inline-flex;align-items:center;align-self:flex-start;height:20px;margin-top:3px;padding:0 7px;border-radius:6px;background:var(--gsd-ok-soft);font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-ok-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-sn:has(.gsd-a-stg){display:block}
.gsd.gsd-v-sdr .gsd-a-sn .gsd-a-stg{margin:0 0 0 4px;vertical-align:1px}

/* the Playbook's step: its words, where it stands (leading, or the spinner while it works), then its box */
.gsd.gsd-v-sdr .gsd-a-pbs{align-items:start}
.gsd.gsd-v-sdr .gsd-a-pbs>.gsd-a-tl,.gsd.gsd-v-sdr .gsd-a-pbs>.gsd-a-ld{align-self:center}
.gsd.gsd-v-sdr .gsd-a-ld{display:grid;justify-items:end}
.gsd.gsd-v-sdr .gsd-a-ld>span{grid-area:1/1}
.gsd.gsd-v-sdr .gsd-a-ldg{font:500 11px/1 var(--gsd-mono);letter-spacing:.02em;color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-run{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-pb-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-run .gsd-spin{border-top-color:var(--gsd-pb)}
.gsd.gsd-v-sdr .gsd-go :is(.gsd-a-ldg,.gsd-a-run){transition:opacity .25s ease}
.gsd.gsd-v-sdr .gsd-go .gsd-a-ldg:not(.gsd-on){opacity:0}
/* the two states take turns: the one coming in waits for the other to be gone, so they are never seen together */
.gsd.gsd-v-sdr .gsd-go :is(.gsd-a-ldg,.gsd-a-run).gsd-on{transition-delay:.25s}
.gsd.gsd-v-sdr .gsd-go .gsd-a-run[data-t]:not(.gsd-on){transform:none}
.gsd.gsd-v-sdr .gsd-a-box{grid-column:2/-1;margin-top:8px;padding:10px 12px 11px;border:1px solid var(--gsd-pb-line);border-radius:10px;background:var(--gsd-pb-soft)}

/* the path of stages: the ones before its entry struck, the ones done dotted, the current one in teal; every state
   is the same width, so the path never shifts when the Playbook moves on */
.gsd.gsd-v-sdr .gsd-a-path{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.gsd.gsd-v-sdr .gsd-a-path>svg{width:9px;height:9px;color:var(--gsd-faint)}
.gsd.gsd-v-sdr .gsd-a-sg{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;font:600 11.5px/1 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-sg::before{content:"";display:none;flex:none;width:5px;height:5px;margin-right:5px;border-radius:50%;background:currentColor}
.gsd.gsd-v-sdr .gsd-a-done{padding:0 4px 0 0}
.gsd.gsd-v-sdr .gsd-a-done::before{display:block}
.gsd.gsd-v-sdr .gsd-a-skip{color:var(--gsd-faint);text-decoration:line-through}
.gsd.gsd-v-sdr .gsd-a-cur{background:var(--gsd-pb);color:#fff;text-decoration:none}
.gsd.gsd-v-sdr .gsd-go .gsd-a-sg{transition:background-color .35s ease,color .35s ease}
.gsd.gsd-v-sdr .gsd-a-sg[data-gsd-hl]{outline-offset:2px}

/* the facts: a chip each, the answer in teal mono after the name; the one the reply taught it ringed, a missing one
   outlined; the learned one is last, so its answer never moves another chip */
.gsd.gsd-v-sdr .gsd-a-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.gsd.gsd-v-sdr .gsd-a-fc{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 9px;border-radius:7px;background:var(--gsd-pb-tint);font:500 11.5px/1 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-fc b{font-weight:500}
.gsd.gsd-v-sdr .gsd-a-fc>span{font:500 11px/1 var(--gsd-mono);color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-new{box-shadow:inset 0 0 0 1.5px var(--gsd-pb)}
.gsd.gsd-v-sdr .gsd-a-miss{background:transparent;box-shadow:inset 0 0 0 1px var(--gsd-line);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-go .gsd-a-fc{transition:background-color .35s ease,box-shadow .35s ease}
.gsd.gsd-v-sdr .gsd-go .gsd-a-fv:not(.gsd-on){display:none}

/* what it wrote and why (the two moments in one place, the taller one holding the room), then what comes next */
.gsd.gsd-v-sdr .gsd-a-wr{display:grid;margin-top:9px;font:400 12.5px/1.5 var(--gsd-sans);color:var(--gsd-text)}
.gsd.gsd-v-sdr .gsd-a-wr>span{grid-area:1/1;text-wrap:pretty}
.gsd.gsd-v-sdr .gsd-a-wr b{font-weight:600;color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-go .gsd-a-wr>[data-t]:not(.gsd-on){transform:none}
.gsd.gsd-v-sdr .gsd-a-nx{margin-top:6px;font:400 12px/1.45 var(--gsd-sans);color:var(--gsd-mute);text-wrap:pretty}

/* live, from the tablet up: the pane is the plan card's height and a little more, so neither column stands half
   empty (the plan ends near the pane's foot, the conversation's first frame fills most of its column) */
@container gsd (min-width:600px){
  .gsd.gsd-v-sdr.gsd-solo:not(.gsd-still) .gsd-panes{height:490px}
}

/* ---- the tablet: the plan's column narrows, the conversation keeps the rest ------------------------------------- */
@container gsd (max-width:879px){
  .gsd.gsd-v-sdr .gsd-a-pb{grid-template-columns:minmax(0,1fr) 340px}
  .gsd.gsd-v-sdr .gsd-a-side{padding:12px}
  .gsd.gsd-v-sdr .gsd-a-mi{padding:14px 14px 16px}
  .gsd.gsd-v-sdr .gsd-a-mi :is(.gsd-out,.gsd-in){max-width:92%}
  .gsd.gsd-v-sdr .gsd-a-steps>li{padding:6px 12px;column-gap:9px}
  .gsd.gsd-v-sdr .gsd-thh>.gsd-ch,.gsd.gsd-v-sdr .gsd-acts small{display:none}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-nx{display:none}
  /* the facts may take a second line here: the room for it is kept, so the fact the reply teaches never pushes the
     box's words down */
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-facts{min-height:54px;align-content:flex-start}
}

/* ---- a phone: one column, the conversation over the Playbook's step; live, the plan keeps the Playbook's step and
   its path (the rest of the card is in the stills) ------------------------------------------------------------------ */
@container gsd (max-width:599px){
  .gsd.gsd-v-sdr .gsd-a-pb{display:flex;flex-direction:column}
  .gsd.gsd-v-sdr .gsd-a-cv{flex:1;border-right:0}
  .gsd.gsd-v-sdr .gsd-a-side{flex:none;padding:10px 12px 12px;border-top:1px solid var(--gsd-line2)}
  .gsd.gsd-v-sdr .gsd-thh>.gsd-ch{display:none}
  .gsd.gsd-v-sdr .gsd-a-mi{padding:12px 12px 14px}
  .gsd.gsd-v-sdr .gsd-a-mi .gsd-out{display:flex;max-width:92%}
  .gsd.gsd-v-sdr .gsd-a-mi :is(.gsd-out,.gsd-in) p{font-size:12.5px}
  .gsd.gsd-v-sdr .gsd-a-why{max-width:100%;font-size:12px}
  .gsd.gsd-v-sdr .gsd-a-clh{gap:6px;padding-right:9px}
  .gsd.gsd-v-sdr .gsd-a-steps>li{padding:5px 10px;column-gap:9px}
  .gsd.gsd-v-sdr .gsd-acts small{display:none}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-ph,
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-steps>li:not(.gsd-a-pbs),
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-box>:not(.gsd-a-path){display:none}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-steps{padding:0}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-pbs{padding:8px 10px 10px}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-sn small{display:none}
  .gsd.gsd-v-sdr .gsd-a-box{grid-column:1/-1}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-box{padding:9px 10px}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-sg{padding:0 6px}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-done{padding:0 2px 0 0}
}
/* a phone, live: the Playbook's path keeps its five stages on one line (Engage to Book) */
@container gsd (max-width:479px){
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-path{flex-wrap:nowrap;gap:2px}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-sg{padding:0 5px;font-size:11px}
  .gsd.gsd-v-sdr:not(.gsd-still) .gsd-a-path>svg{width:8px;height:8px}
}

/* ---- the slices (part=): one column at the pane's width, at its content's height -------------------------------- */
.gsd.gsd-v-sdr[data-gsd-part] .gsd-a-pb{display:block}
.gsd.gsd-v-sdr[data-gsd-part] .gsd-a-cv{border-right:0}
.gsd.gsd-v-sdr[data-gsd-part] .gsd-a-msgs{-webkit-mask-image:none;mask-image:none}
.gsd.gsd-v-sdr[data-gsd-part=draft] .gsd-a-mi{padding:16px}
/* the draft's slice names the sender profile it replies as, at a block's width too */
.gsd.gsd-v-sdr[data-gsd-part=draft] .gsd-acts small{display:inline}
/* where the buttons and that name do not fit one line (a phone's block), the name takes the next one, still at the
   right, inside the draft's card */
.gsd.gsd-v-sdr[data-gsd-part=draft] .gsd-acts{flex-wrap:wrap;row-gap:8px}
/* the setup card in the flow, one line a row (it stands over the thread in the full window) */
.gsd.gsd-v-sdr[data-gsd-part=setup] .gsd-a-pb{padding:20px}
.gsd.gsd-v-sdr .gsd-a-su .gsd-setup{position:relative;left:auto;top:auto;width:auto;translate:none;box-shadow:0 1px 2px rgba(20,21,28,.04)}

/* ---- the scenarios (part=scenarios, a still only): the agent studio's Scenarios tab drawn for a block (gs.front.app
   ScenariosTab, simplified): the count line and Add a scenario, then a row a scenario: its emoji and name over when it
   fires, its threads of the last 30 days at the right, and under them its plan as labelled steps, a caret between two.
   A step is its kind's glyph on a small tile and the app's words for it, on a grey pill; the Playbook's step in its
   teal, a message on the AI's tint, the task for you in the warn ink, a stage as the app draws it (its ring in the
   category's hue, then the name). Info request, Maya's scenario, is an inner card with the mark's ring ------------- */
.gsd.gsd-v-sdr{
  --gsd-rg-positive:#4FC183;--gsd-rg-nurture:#5EA0EE;--gsd-rg-disqualified:#6E7A91;
  --gsd-you:var(--gsd-warn);--gsd-you-ink:var(--gsd-warn-ink);
}
.gsd.gsd-v-sdr .gsd-a-sct{padding:0 0 8px}
.gsd.gsd-v-sdr .gsd-a-scm{display:flex;align-items:center;gap:12px;margin:0;padding:12px 20px}
.gsd.gsd-v-sdr .gsd-a-scm>span:first-child{flex:1;min-width:0;font:400 12px/1.35 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-sl{margin:0;padding:0;list-style:none}
.gsd.gsd-v-sdr .gsd-a-sr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:9px;align-items:start;margin:0;padding:12px 20px 13px;border-top:1px solid var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-sm{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-sdr .gsd-a-sm b{display:flex;align-items:center;gap:8px;font:600 13.5px/20px var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-a-se{flex:none;width:18px;font-size:15px;line-height:1;text-align:center}
.gsd.gsd-v-sdr .gsd-a-sm small{font:400 12px/1.4 var(--gsd-sans);color:var(--gsd-mute);text-wrap:pretty}
.gsd.gsd-v-sdr .gsd-a-s30{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:2px;white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-s30 b{font:600 13px/16px var(--gsd-mono);color:var(--gsd-text);font-variant-numeric:tabular-nums}
.gsd.gsd-v-sdr .gsd-a-s30 small{font:400 12px/1 var(--gsd-mono);color:var(--gsd-faint)}
/* the plan: the steps in their order, a caret between two (a step that wraps to a new line keeps its caret) */
.gsd.gsd-v-sdr .gsd-a-ss{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin:0;padding:0;list-style:none}
.gsd.gsd-v-sdr .gsd-a-st{position:relative;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 3px;border-radius:8px;background:var(--gsd-fill);font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-st+.gsd-a-st{margin-left:16px}
.gsd.gsd-v-sdr .gsd-a-st+.gsd-a-st::before{content:"";position:absolute;top:50%;left:-9px;width:5px;height:5px;border-top:1.5px solid var(--gsd-faint);border-right:1.5px solid var(--gsd-faint);transform:translate(-60%,-50%) rotate(45deg)}
.gsd.gsd-v-sdr .gsd-a-sti{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--gsd-bg);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-sti svg{width:13px;height:13px;fill:currentColor}
.gsd.gsd-v-sdr .gsd-a-stw{display:inline-flex;align-items:center;gap:5px}
.gsd.gsd-v-sdr .gsd-a-stw b{font-weight:650}
.gsd.gsd-v-sdr .gsd-a-emo{font-size:12px;line-height:1}
.gsd.gsd-v-sdr .gsd-a-stw>svg{width:12px;height:12px;fill:var(--gsd-faint)}
.gsd.gsd-v-sdr .gsd-a-st-pb{background:color-mix(in srgb,var(--gsd-pb) 13%,transparent);color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-st-pb .gsd-a-sti{background:var(--gsd-pb);color:#fff}
.gsd.gsd-v-sdr .gsd-a-st-msg{background:var(--gsd-ai-soft)}
.gsd.gsd-v-sdr .gsd-a-st-msg .gsd-a-sti{color:var(--gsd-ai)}
.gsd.gsd-v-sdr .gsd-a-st-task{background:color-mix(in srgb,var(--gsd-you) 13%,transparent);color:var(--gsd-you-ink)}
.gsd.gsd-v-sdr .gsd-a-st-task .gsd-a-sti{color:var(--gsd-you-ink)}
.gsd.gsd-v-sdr .gsd-a-st-stop .gsd-a-sti{color:var(--gsd-bad)}
/* a stage: its ring in the category's hue on the tile (gs.front.app PipelineStageMark), its name after Move to */
.gsd.gsd-v-sdr .gsd-a-st-stage .gsd-a-sti svg{color:var(--gsd-rg)}
.gsd.gsd-v-sdr .gsd-a-st-stage circle{fill:none;stroke:currentColor;stroke-width:1.5}
.gsd.gsd-v-sdr .gsd-a-st-stage .gsd-a-rgs{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.gsd.gsd-v-sdr .gsd-a-rg-positive{--gsd-rg:var(--gsd-rg-positive)}
.gsd.gsd-v-sdr .gsd-a-rg-nurture{--gsd-rg:var(--gsd-rg-nurture)}
.gsd.gsd-v-sdr .gsd-a-rg-disqualified{--gsd-rg:var(--gsd-rg-disqualified)}
/* the mark: the row stands as an inner card, ringed, where the list's edges are */
.gsd.gsd-v-sdr .gsd-a-sr[data-gsd-hl]{margin:0 10px;padding-left:10px;padding-right:10px;border-top-color:transparent;border-radius:12px;background:var(--gsd-hl-tint);box-shadow:inset 0 0 0 1.5px var(--gsd-hl)}
.gsd.gsd-v-sdr .gsd-a-sr[data-gsd-hl]+.gsd-a-sr{border-top-color:transparent}
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-sdr .gsd-a-scm>span:first-child{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sm b{font-size:14.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-se{font-size:16px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sm small{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-s30 b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-st{height:30px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sti{width:24px;height:24px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sti svg{width:14px;height:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-emo{font-size:13px}
}
/* a phone: a row is the name with its threads of 30 days on one line, then the plan, which takes a second line where
   it must; when it fires is left to the wider block (the name and the steps say what the scenario is), and the button
   gives its room to the count line */
@container gsd (max-width:419px){
  .gsd.gsd-v-sdr .gsd-a-scm{padding:10px 12px}
  .gsd.gsd-v-sdr .gsd-a-scm .gsd-btn{display:none}
  .gsd.gsd-v-sdr .gsd-a-sr{column-gap:10px;row-gap:8px;padding:10px 12px 11px}
  .gsd.gsd-v-sdr .gsd-a-sr[data-gsd-hl]{margin:0 6px;padding-left:6px;padding-right:6px}
  .gsd.gsd-v-sdr .gsd-a-sm small{display:none}
  .gsd.gsd-v-sdr .gsd-a-s30{flex-direction:row;align-items:baseline;gap:5px;padding-top:2px}
  .gsd.gsd-v-sdr .gsd-a-st{font-size:12px}
}

/* ---- the Playbook (part=playbook, a still only): the Playbook leading her conversation, drawn for a block (gs.front.app
   PlanCard's Playbook box, simplified): its head, its five stages as a track, a node and a name and a state each (done
   a teal check, skipped a dashed ring, now a teal ring with its halo, next an empty ring, the stage before its start a
   smaller grey ring; the words of the two that did not run in the mute ink, never fainter, since they say why), the
   line between two nodes teal where the dialog went, grey ahead, dotted before the start; then what it
   learned, what it wrote and what comes next, a key and a value each (BRANDBOOK section 20's facts) ------------------ */
.gsd.gsd-v-sdr .gsd-a-pk{padding:4px 0 6px}
.gsd.gsd-v-sdr .gsd-a-pkh{display:flex;align-items:center;gap:10px;padding:12px 20px 4px}
.gsd.gsd-v-sdr .gsd-a-pki{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--gsd-pb);color:#fff}
.gsd.gsd-v-sdr .gsd-a-pki svg{width:17px;height:17px;fill:currentColor}
.gsd.gsd-v-sdr .gsd-a-pkt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.gsd.gsd-v-sdr .gsd-a-pkt b{font:600 13.5px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-a-pkt small{font:400 12px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-pks{display:inline-flex;align-items:center;gap:6px;flex:none;font:500 12px/1 var(--gsd-sans);color:var(--gsd-pb-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-pks i{width:6px;height:6px;border-radius:50%;background:var(--gsd-pb)}
/* the track */
.gsd.gsd-v-sdr .gsd-a-trk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:16px 8px 14px;list-style:none}
.gsd.gsd-v-sdr .gsd-a-tk{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 2px;text-align:center}
.gsd.gsd-v-sdr .gsd-a-tk+.gsd-a-tk::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;border-radius:1px;background:var(--gsd-line)}
.gsd.gsd-v-sdr .gsd-a-tkn{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--gsd-bg);box-shadow:inset 0 0 0 1.5px var(--gsd-line)}
.gsd.gsd-v-sdr .gsd-a-tkn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsd.gsd-v-sdr .gsd-a-tk b{margin-top:9px;font:600 13px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-sdr .gsd-a-tk small{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;font:500 12px/1.25 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-tk small em{font-style:normal;font-weight:400;color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-tk-pre .gsd-a-tkn{transform:scale(.75);box-shadow:inset 0 0 0 2px var(--gsd-line)}
.gsd.gsd-v-sdr .gsd-a-tk-pre :is(b,small){color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-tk-pre b{font-weight:500}
.gsd.gsd-v-sdr .gsd-a-tk+.gsd-a-tk-done::before{background:repeating-linear-gradient(90deg,var(--gsd-line) 0 3px,transparent 3px 6px)}
.gsd.gsd-v-sdr .gsd-a-tk-done .gsd-a-tkn{background:var(--gsd-pb);box-shadow:none;color:#fff}
.gsd.gsd-v-sdr .gsd-a-tk-done small{color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-tk+:is(.gsd-a-tk-skip,.gsd-a-tk-now)::before{background:var(--gsd-pb)}
.gsd.gsd-v-sdr .gsd-a-tk-skip .gsd-a-tkn{transform:scale(.75);box-shadow:none;background:var(--gsd-bg);outline:2px dashed color-mix(in srgb,var(--gsd-pb) 55%,var(--gsd-bg));outline-offset:-2px}
.gsd.gsd-v-sdr .gsd-a-tk-skip b{color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-tk-skip small{color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-tk-now .gsd-a-tkn{box-shadow:inset 0 0 0 2px var(--gsd-pb),0 0 0 5px color-mix(in srgb,var(--gsd-pb) 16%,transparent)}
.gsd.gsd-v-sdr .gsd-a-tk-now .gsd-a-tkn::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gsd-pb)}
.gsd.gsd-v-sdr .gsd-a-tk-now b{color:var(--gsd-pb-ink);font-weight:700}
.gsd.gsd-v-sdr .gsd-a-tk-now small{color:var(--gsd-pb-ink);font-weight:600}
.gsd.gsd-v-sdr .gsd-a-tk-next b{color:var(--gsd-text)}
/* the mark: the stage it stands on, ringed as a column */
.gsd.gsd-v-sdr .gsd-a-tk[data-gsd-hl]{border-radius:10px;outline:1.5px solid var(--gsd-hl);outline-offset:2px}
/* what it learned, wrote, does next: a key and a value each */
.gsd.gsd-v-sdr .gsd-a-pkd{margin:0 20px;border-top:1px solid var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-pkd>div{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--gsd-line2)}
.gsd.gsd-v-sdr .gsd-a-pkd>div:last-child{border-bottom:0;padding-bottom:6px}
.gsd.gsd-v-sdr .gsd-a-pkd dt{font:500 12px/1.45 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-pkd dd{margin:0;font:400 13px/1.5 var(--gsd-sans);color:var(--gsd-text);text-wrap:pretty}
.gsd.gsd-v-sdr .gsd-a-kfs{display:flex;flex-wrap:wrap;gap:6px}
.gsd.gsd-v-sdr .gsd-a-pkd>div:first-child{align-items:center}
.gsd.gsd-v-sdr .gsd-a-kf{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:26px;padding:0 9px;border-radius:7px;background:var(--gsd-pb-tint);font:500 12px/1 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd.gsd-v-sdr .gsd-a-kf b{font-weight:500}
.gsd.gsd-v-sdr .gsd-a-kf>span{font:500 12px/1 var(--gsd-mono);color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-kf em{font:600 12px/1 var(--gsd-sans);font-style:normal;color:var(--gsd-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-kf-new{box-shadow:inset 0 0 0 1.5px var(--gsd-pb)}
.gsd.gsd-v-sdr .gsd-a-kf-new em{padding:3px 6px;border-radius:5px;background:var(--gsd-pb-ink);color:var(--gsd-on-pb-ink)}
.gsd.gsd-v-sdr .gsd-a-kf-miss{background:transparent;box-shadow:inset 0 0 0 1px var(--gsd-line);color:var(--gsd-mute)}
.gsd.gsd-v-sdr .gsd-a-kf-miss em{font:400 12px/1 var(--gsd-sans);color:var(--gsd-mute)}
/* what it wrote is the dialog's own line, which starts after its key in the app ("Wrote: the overview"): here it
   stands alone, so its first letter is a capital */
.gsd.gsd-v-sdr .gsd-a-pkw{display:block}
.gsd.gsd-v-sdr .gsd-a-pkw::first-letter{text-transform:uppercase}
.gsd.gsd-v-sdr .gsd-a-pkwa{display:flex;align-items:center;gap:6px;margin-top:5px;font:500 12px/1.3 var(--gsd-sans);color:var(--gsd-you-ink)}
.gsd.gsd-v-sdr .gsd-a-pkwa i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gsd-you)}
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-sdr .gsd-a-pkt b{font-size:14.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-pkt small,.gsd.gsd-still.gsd-v-sdr .gsd-a-pks{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-tk b{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-tk small{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-pkd dt{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-pkd dd{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-kf{height:28px;padding:0 10px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-kf>span{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-kf-miss em{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-pkwa{font-size:13px}
}
/* a phone: the key runs in before its value, as the app's plan card writes it ("Wrote: the overview..."), so a line
   keeps the card's whole width and no key takes a line of its own */
@container gsd (max-width:419px){
  .gsd.gsd-v-sdr .gsd-a-pkh{padding:10px 12px 2px}
  .gsd.gsd-v-sdr .gsd-a-trk{padding:14px 0 12px}
  .gsd.gsd-v-sdr .gsd-a-tk{padding:0 1px}
  .gsd.gsd-v-sdr .gsd-a-pkd{margin:0 12px}
  .gsd.gsd-v-sdr .gsd-a-pkd>div{display:block;padding:8px 0}
  .gsd.gsd-v-sdr .gsd-a-pkd>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
  .gsd.gsd-v-sdr .gsd-a-pkd>div:last-child{padding-bottom:4px}
  .gsd.gsd-v-sdr .gsd-a-pkd dt{display:inline;margin-right:4px}
  .gsd.gsd-v-sdr .gsd-a-pkd dt::after{content:":"}
  .gsd.gsd-v-sdr .gsd-a-pkd dd,.gsd.gsd-v-sdr .gsd-a-pkw{display:inline}
  .gsd.gsd-v-sdr .gsd-a-pkd dd.gsd-a-kfs{display:contents}
}

/* ---- a still: its moment and nothing after it; what has not landed takes no room; the spinner a whole ring ------ */
.gsd.gsd-v-sdr.gsd-still .gsd-go .gsd-a-run .gsd-spin{border-color:var(--gsd-pb)}
/* read beside the page's own words (a block's cell, about 600 px at 1440): every label 13 px or more */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-sdr .gsd-mode{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-thh b,.gsd.gsd-still.gsd-v-sdr .gsd-a-pht b{font-size:14.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-thh small,.gsd.gsd-still.gsd-v-sdr .gsd-a-pht small{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-ch,.gsd.gsd-still.gsd-v-sdr .gsd-note{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr :is(.gsd-in,.gsd-out) p,.gsd.gsd-still.gsd-v-sdr .gsd-dt{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-out small{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-sc{height:22px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-clh{height:32px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr :is(.gsd-a-cf,.gsd-a-clh time){font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-why{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr :is(.gsd-dh,.gsd-btn){font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-dh b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-acts small{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-ph .gsd-stat{height:26px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-steps>li{min-height:48px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-tl{width:30px;height:30px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-tl svg{width:17px;height:17px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-steps>li{grid-template-columns:30px minmax(0,1fr) auto}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sn{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sn small,.gsd.gsd-still.gsd-v-sdr .gsd-a-steps>li>time,.gsd.gsd-still.gsd-v-sdr .gsd-a-ldg{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-stg{height:22px;font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-sg{height:26px;padding:0 9px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-done{padding:0 8px 0 0}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-path>svg{width:10px;height:10px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-fc{height:28px;padding:0 10px;font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-fc>span{font-size:12.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-wr{font-size:14px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-nx{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-box{padding:12px 14px 13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-suh,.gsd.gsd-still.gsd-v-sdr .gsd-setup dt{font-size:13px}
  .gsd.gsd-still.gsd-v-sdr .gsd-setup dd{font-size:13.5px}
  .gsd.gsd-still.gsd-v-sdr .gsd-suh b{font-size:14px}
}
/* a phone's still: 12 px at the least, a thread's subtitle and the setup's rows take a second line rather than cut */
@container gsd (max-width:419px){
  .gsd.gsd-still.gsd-v-sdr :is(.gsd-ch,.gsd-sc,.gsd-acts small,.gsd-a-cf,.gsd-a-clh time,.gsd-a-fc>span){font-size:12px}
  .gsd.gsd-still.gsd-v-sdr :is(.gsd-a-sn small,.gsd-a-steps>li>time,.gsd-a-ldg,.gsd-a-sg,.gsd-a-fc,.gsd-a-nx){font-size:12px}
  .gsd.gsd-still.gsd-v-sdr .gsd-thh{height:auto;min-height:50px;padding-top:8px;padding-bottom:8px}
  .gsd.gsd-still.gsd-v-sdr .gsd-thh small{white-space:normal}
  .gsd.gsd-still.gsd-v-sdr .gsd-a-clh{height:auto;min-height:28px;padding-top:4px;padding-bottom:4px;flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:14px}
  .gsd.gsd-still.gsd-v-sdr[data-gsd-part=setup] .gsd-a-pb{padding:12px}
  .gsd.gsd-still.gsd-v-sdr[data-gsd-part=setup] .gsd-setup dl>div{grid-template-columns:minmax(0,1fr) 16px;row-gap:2px;padding:8px 0}
  .gsd.gsd-still.gsd-v-sdr[data-gsd-part=setup] .gsd-setup :is(dt,dd){grid-column:1}
  .gsd.gsd-still.gsd-v-sdr[data-gsd-part=setup] .gsd-setup .gsd-ck{grid-column:2;grid-row:1/3}
}