/* Playtables' piece of the demo (template-parts/demo-table.php): the rules its own views need, loaded after demo.css
   (inc/demo.php GS_DEMO_PIECE_STYLES). Every rule is scoped to .gsd.gsd-v-table, the piece and its stills, so the full
   window never reads one of them.

   What the piece adds to the table the full window shows: the context columns (the app's Pipeline stage, Workflows
   and AI SDR column types, gs.front.app route/playtableDetail grid cells), the finder under each found work email, and
   for part=types the app's New column catalog. The context columns sit in a grid of their own (.gsd-tbx, the whole
   piece and part=context), so their column sets below never reach part=email, fit or line. */

/* the piece stands as wide as the full window in a hero: seven columns read whole at 1280 */
.gsd.gsd-v-table:not(.gsd-still){max-width:1280px}

/* a state that swaps in place (gsd-ss): without the clock (no script, reduced motion) only the run's last one stands */
.gsd.gsd-v-table .gsd-win:not(.gsd-go) .gsd-ss[data-off]{display:none}

/* ---- the finder: under a found address, the finder that found it; under a miss, the chain it tried -------------- */
.gsd.gsd-v-table .gsd-k3 .gsd-sw{flex-wrap:wrap;row-gap:2px}
.gsd.gsd-v-table .gsd-fdr{flex-basis:100%;min-width:0;font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-sw:not(.gsd-miss) .gsd-fdr>:last-child,.gsd.gsd-v-table .gsd-miss .gsd-fdr>:first-child{display:none}

/* ---- the context cells ---------------------------------------------------------------------------------------------
   the stage: its ring in the category's hue (the pipe palette, the same in both themes) and its name in the text ink;
   the workflow and the AI SDR: a glyph in the state's colour, then two lines, the step or the scenario over the state
   or the mode; nothing yet: the app's empty mark, a plain hyphen in the faintest ink */
.gsd.gsd-v-table .gsd-cxs{display:inline-flex;align-items:center;gap:7px;min-width:0;font:400 12.5px/1.25 var(--gsd-sans);color:var(--gsd-text)}
.gsd.gsd-v-table .gsd-cxs>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsd.gsd-v-table .gsd-rg-eng{--gsd-rg:#F0A23E}
.gsd.gsd-v-table .gsd-rg-pos{--gsd-rg:#4FC183}
.gsd.gsd-v-table .gsd-cx{display:flex;align-items:center;gap:9px;min-width:0}
.gsd.gsd-v-table .gsd-cx>svg{width:16px;height:16px;color:var(--gsd-cxc)}
.gsd.gsd-v-table .gsd-cx>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-table .gsd-cx b{font:500 13px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-cx small{font:500 12px/1.25 var(--gsd-sans);color:var(--gsd-cxi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-cx-act{--gsd-cxc:var(--gsd-ai);--gsd-cxi:var(--gsd-ai-ink)}
.gsd.gsd-v-table .gsd-cx-pau{--gsd-cxc:var(--gsd-warn);--gsd-cxi:var(--gsd-warn-ink)}
.gsd.gsd-v-table .gsd-cx-co{--gsd-cxc:var(--gsd-warn);--gsd-cxi:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-cxn{font:400 13px/1 var(--gsd-sans);color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-gh .gsd-k8 svg{color:var(--gsd-ai)}
/* the run lights the columns it works in, as it lights the email, the score and the line: the stage and the workflow
   as the invitations go out, the AI SDR while the replies land */
.gsd.gsd-v-table .gsd-go .gsd-tb.gsd-col-w .gsd-gh :is(.gsd-k6,.gsd-k7){color:var(--gsd-ink);box-shadow:inset 0 -2px 0 var(--gsd-ink)}
.gsd.gsd-v-table .gsd-go .gsd-tb.gsd-col-r .gsd-gh .gsd-k8{color:var(--gsd-ink);box-shadow:inset 0 -2px 0 var(--gsd-ai)}

/* ---- the context grid's column sets, by the figure's width ----------------------------------------------------------
   from 1240 (the hero at 1440): Person, Work email, AI score, First line, Pipeline stage, Workflows, AI SDR (the
   company gives way, the title stays under the name); to 1080 the work email rides under the name; to 830 the first
   line goes; to 600 the workflow; on a phone the person and the stage */
.gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>:is(.gsd-k2,.gsd-k3,.gsd-k4,.gsd-k5,.gsd-k6,.gsd-k7,.gsd-k8){display:none}
.gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>:is(.gsd-k4,.gsd-k6,.gsd-k8){display:flex}
.gsd.gsd-v-table .gsd-tbx .gsd-gh .gsd-k1e{display:inline}
.gsd.gsd-v-table .gsd-tbx .gsd-pe{display:block;min-width:0}
.gsd.gsd-v-table .gsd-tbx .gsd-tr .gsd-k1 small{display:none}
.gsd.gsd-v-table .gsd-tbx .gsd-pe .gsd-sw{gap:6px}
.gsd.gsd-v-table .gsd-tbx .gsd-pe .gsd-sk{width:118px;max-width:100%;height:7px;margin:5px 0 3px}
.gsd.gsd-v-table .gsd-tbx .gsd-pe .gsd-vf{width:14px;height:14px;background-size:9px}
.gsd.gsd-v-table .gsd-tbx .gsd-pe :is(.gsd-em,.gsd-none){font-size:12px}
.gsd.gsd-v-table .gsd-go .gsd-tbx .gsd-gh .gsd-k1{transition:color .3s,box-shadow .3s}
.gsd.gsd-v-table .gsd-go .gsd-tb.gsd-col-e .gsd-tbx .gsd-gh .gsd-k1{color:var(--gsd-ink);box-shadow:inset 0 -2px 0 var(--gsd-ink)}
@container gsd (min-width:600px){
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 112px minmax(150px,176px) 128px}
  .gsd.gsd-v-table .gsd-tbx .gsd-cxs>span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}
@container gsd (min-width:830px){
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 112px 196px 176px 134px}
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>.gsd-k7{display:flex}
  .gsd.gsd-v-table .gsd-tbx .gsd-cxs>span{display:block;white-space:nowrap}
}
@container gsd (min-width:1080px){
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 112px minmax(0,1.2fr) 196px 176px 134px}
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>.gsd-k5{display:flex}
}
@container gsd (min-width:1240px){
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 112px minmax(0,1.45fr) 196px 176px 134px}
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>.gsd-k3{display:flex}
  .gsd.gsd-v-table .gsd-tbx .gsd-gh .gsd-k1e,.gsd.gsd-v-table .gsd-tbx .gsd-pe{display:none}
  .gsd.gsd-v-table .gsd-tbx .gsd-tr .gsd-k1 small{display:block}
  .gsd.gsd-v-table .gsd-go .gsd-tb.gsd-col-e .gsd-tbx .gsd-gh .gsd-k1{color:var(--gsd-mute);box-shadow:none}
}
/* a phone: the person with the found email under the name, and the stage, which moves through the whole loop */
@container gsd (max-width:599px){
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) 124px}
  .gsd.gsd-v-table .gsd-tbx :is(.gsd-gh,.gsd-tr)>:is(.gsd-k4,.gsd-k8){display:none}
  .gsd.gsd-v-table .gsd-tbx .gsd-cxs{font-size:12px}
  .gsd.gsd-v-table .gsd-tbx .gsd-cxs>span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}

/* ---- a still steps its type up from 420 px of pane, as the table's other cells do ---------------------------------- */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-table .gsd-fdr{font-size:12.5px}
  .gsd.gsd-still.gsd-v-table .gsd-cxs{font-size:13px}
  .gsd.gsd-still.gsd-v-table .gsd-cx b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-table .gsd-cx small{font-size:12.5px}
}

/* ---- part=context: the person (the name alone: the point is the context) and the three context columns, each row as
   tall as its words; at a block's 600 px the stage may take a second line, nothing else wraps; on a phone the
   Workflows column gives way ---------------------------------------------------------------------------------------- */
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr)>:is(.gsd-k6,.gsd-k7,.gsd-k8){display:flex;border-right:1px solid var(--gsd-line2)}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr)>:last-child{border-right:0}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-gh .gsd-k1e{display:none}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr .gsd-k1 small{display:none}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr{height:auto;min-height:56px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr)>span{padding-left:10px;padding-right:10px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr>span{padding-top:9px;padding-bottom:9px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr .gsd-k1{gap:9px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr .gsd-av{width:28px;height:28px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-tr .gsd-k1 b{font-size:13px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-cxs>span{display:block;white-space:normal}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-cx b{font-size:13px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) minmax(0,.98fr) minmax(0,.9fr)}
.gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr)>.gsd-k7{display:none}
@container gsd (min-width:520px){
  .gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,.8fr) minmax(0,.95fr) minmax(0,1.25fr) minmax(0,.88fr)}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx :is(.gsd-gh,.gsd-tr)>.gsd-k7{display:flex}
}
@container gsd (max-width:519px){
  /* a phone's cell: the scenario may take a second line before it is cut */
  .gsd.gsd-still.gsd-v-table[data-gsd-part=context] .gsd-tbx .gsd-cx b{white-space:normal}
}

/* ---- part=types: the New column catalog, as the app's drawer draws it (gs.front.app drawers.module.scss nc*) ------- */
.gsd.gsd-still.gsd-v-table[data-gsd-part=types]{max-width:460px}
.gsd.gsd-v-table .gsd-ty{padding:16px 14px 14px}
.gsd.gsd-v-table .gsd-ty-h{display:flex;align-items:center;gap:9px;padding:0 4px;font:600 15px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-ty-h svg{width:16px;height:16px;color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-ty-q{display:flex;align-items:center;gap:8px;height:36px;margin-top:14px;padding:0 11px;border:1px solid var(--gsd-line);border-radius:9px;font:400 13.5px/1 var(--gsd-sans);color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-ty-q svg{width:15px;height:15px;color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-ty-tabs{display:flex;gap:2px;margin-top:10px;padding:2px;border-radius:9px;background:var(--gsd-sunk)}
.gsd.gsd-v-table .gsd-ty-tabs>span{display:grid;place-items:center;flex:1;height:28px;border-radius:7px;font:500 13px/1 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-ty-tabs>.gsd-ty-on{background:var(--gsd-bg);color:var(--gsd-ink);box-shadow:0 1px 2px rgba(20,21,28,.08),inset 0 0 0 1px var(--gsd-line2)}
.gsd.gsd-v-table .gsd-ty-s{margin:16px 6px 3px;font:700 11.5px/1.2 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-ty-l{display:flex;flex-direction:column;gap:1px}
.gsd.gsd-v-table .gsd-ty-l>li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px}
.gsd.gsd-v-table .gsd-ty-l>li>svg{width:18px;height:18px;color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-ty-l>li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-table .gsd-ty-l b{font:500 14px/1.3 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-ty-l small{font:400 12.5px/1.4 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-ty-w>li{padding-top:8px;padding-bottom:8px}
/* a marked item reads as the app's hovered one: the soft fill, the icon in the primary */
.gsd.gsd-v-table .gsd-ty-l>li[data-gsd-hl]{outline:0;background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1px var(--gsd-ai-line)}
.gsd.gsd-v-table .gsd-ty-l>li[data-gsd-hl]::before{content:none}
.gsd.gsd-v-table .gsd-ty-l>li[data-gsd-hl]>svg{color:var(--gsd-ai)}
@container gsd (max-width:419px){
  .gsd.gsd-v-table .gsd-ty{padding:14px 10px 10px}
  .gsd.gsd-v-table .gsd-ty-tabs>span{font-size:12px}
  .gsd.gsd-v-table .gsd-ty-l small{font-size:12px}
}

/* ---- the loop's seam (demo.js dissolve): while the finished table's copy fades over the first frame, the first frame's
   context cells (the stage, the workflow, the AI SDR, the only cells with words in both) wait under it, then fade in,
   so two stages are never read in one cell ----------------------------------------------------------------------- */
.gsd.gsd-v-table:not(.gsd-still) .gsd-go .gsd-tr>:is(.gsd-k6,.gsd-k7,.gsd-k8){transition:opacity .3s ease}
.gsd.gsd-v-table:not(.gsd-still) .gsd-win:has(>.gsd-ghost)>.gsd-panes:not(.gsd-ghost) .gsd-tr>:is(.gsd-k6,.gsd-k7,.gsd-k8){opacity:0}

/* ---- part=finder: what the email finder reads and what it gives, the Person (the name and the title), Company and
   Work email columns, each found address with the finder that found it. A still, or the live part of a feature page's
   hero (no at=: the piece's own moments, demo-table.php), where each cell, while it works, says the finder it tries
   under the skeleton (.gsd-fdw, two states that swap in place). The rows keep their 56 px (62 from 420 px of pane, as
   every still of the table), so a cell only changes its words: nothing moves the layout. From 600 px of pane the three
   columns; on a phone the person and the work email. part=verdicts lays out the same, a still only: under each
   address the status its check gave it, and the cell's mark in that status's tone. ---------------------------------- */
.gsd.gsd-v-table:is([data-gsd-part=finder],[data-gsd-part=verdicts]){max-width:720px}
.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.24fr)}
.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-gh,.gsd-tr)>:is(.gsd-k2,.gsd-k3){display:flex}
.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-gh,.gsd-tr)>.gsd-k3{border-right:0}
.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-tr .gsd-k1 small{display:block}
/* the live part's rows are as tall as a still's from 420 px of pane, so the hero and a block's still read alike */
@container gsd (min-width:420px){
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-gh{height:38px}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-gh>span{font-size:13px}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-tr{height:62px}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-k1,.gsd-k2) b{font-size:13.5px}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-k1,.gsd-k2) small,.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-em,.gsd-none){font-size:13px}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-fdr,.gsd-fdw){font-size:12.5px}
}
@container gsd (max-width:599px){
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) :is(.gsd-gh,.gsd-tr)>.gsd-k2{display:none}
  .gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-tr .gsd-k1 small{display:none}
}
/* the work email column is the one the run lights (the full window lights the Person column too where the email rides
   under the name; here it has its own column at every width) */
.gsd.gsd-v-table.gsd-fit:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-go .gsd-tb.gsd-col-e .gsd-gh .gsd-k1{color:var(--gsd-mute);box-shadow:none}
/* a cell at work: the skeleton over the finder it tries, one column of two lines inside the row */
.gsd.gsd-v-table:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-tr>.gsd-k3{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.gsd.gsd-v-table:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-k3>.gsd-sw{width:100%}
.gsd.gsd-v-table:is([data-gsd-part=finder],[data-gsd-part=verdicts]) .gsd-k3>.gsd-sk{width:min(150px,72%);margin:0}
/* part=verdicts: Deliverable in the check's green ink; a catch-all domain wears the widget's warning, in its ink; an
   unverified address keeps no mark, as the app's widget draws it */
.gsd.gsd-v-table[data-gsd-part=verdicts] .gsd-sw:not(.gsd-vd-ca):not(.gsd-vd-no) .gsd-fdr{color:var(--gsd-ok-ink)}
.gsd.gsd-v-table .gsd-vd-ca .gsd-vf{background:var(--gsd-warn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M10 5.5v5.2M10 14.4v.1'/%3E%3C/svg%3E") center/10px no-repeat}
.gsd.gsd-v-table .gsd-vd-ca .gsd-fdr{color:var(--gsd-warn-ink)}
.gsd.gsd-v-table .gsd-vd-no .gsd-vf{display:none}
/* the line keeps its room while the cell waits, its words still to come, so the skeleton above it never moves */
.gsd.gsd-v-table .gsd-fdw{display:none;min-width:0;max-width:100%;min-height:1.25em;font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-ai-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-go .gsd-sw:not(.gsd-on)~.gsd-fdw{display:block}

/* ---- part=settings: the Find work email column's settings, as the app's drawer draws them (gs.front.app
   FindEmailConfigForm.tsx, drawers.module.scss aic* and fwe*), simplified, under the table's header: the drawer's
   title, then four sections, each a title over its body. A marked section wears the demo's ring. -------------------- */
.gsd.gsd-still.gsd-v-table:is([data-gsd-part=settings],[data-gsd-part=sequence]){max-width:480px}
.gsd.gsd-v-table .gsd-fe{padding:14px 14px 16px}
.gsd.gsd-v-table .gsd-fe-h{display:flex;align-items:center;gap:9px;padding:2px 4px 12px;border-bottom:1px solid var(--gsd-line2);font:600 15px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-fe-h svg{width:17px;height:17px;color:var(--gsd-ai)}
.gsd.gsd-v-table .gsd-fe-s{margin-top:10px;padding:2px 4px 4px;border-radius:10px}
.gsd.gsd-v-table .gsd-fe-s[data-gsd-hl]{outline-offset:2px}
.gsd.gsd-v-table .gsd-fe-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:6px 2px;font:600 13px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-fe-t small{margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--gsd-sunk);font:500 11px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-fe-cv{flex:none;width:13px;height:13px;color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-fe-q{display:flex;flex-direction:column;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.gsd.gsd-v-table .gsd-fe-q>li{display:flex;align-items:center;gap:9px;min-width:0;height:38px;padding:0 10px 0 6px;border:1px solid var(--gsd-line);border-radius:9px;background:var(--gsd-bg)}
.gsd.gsd-v-table .gsd-fe-dr{flex:none;width:14px;height:14px;color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-fe-mk{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--gsd-sunk);box-shadow:inset 0 0 0 1px var(--gsd-line2);font:600 11.5px/1 var(--gsd-sans);color:var(--gsd-text)}
.gsd.gsd-v-table .gsd-fe-mk svg{width:13px;height:13px}
.gsd.gsd-v-table .gsd-fe-row{color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-fe-vf{background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1px var(--gsd-ai-line);color:var(--gsd-ai)}
.gsd.gsd-v-table .gsd-fe-vf svg{width:14px;height:14px}
.gsd.gsd-v-table :is(.gsd-fe-q,.gsd-fe-sel) b{min-width:0;font:500 13px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-fe-in{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.gsd.gsd-v-table .gsd-fe-in>li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border-radius:8px;background:var(--gsd-sunk);box-shadow:inset 0 0 0 1px var(--gsd-line2);font:500 12.5px/1 var(--gsd-sans);color:var(--gsd-text);white-space:nowrap}
.gsd.gsd-v-table .gsd-fe-in svg{width:13px;height:13px;color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-fe-sel{display:flex;align-items:center;gap:9px;height:38px;margin-top:4px;padding:0 10px 0 8px;border:1px solid var(--gsd-line);border-radius:9px;background:var(--gsd-bg)}
.gsd.gsd-v-table .gsd-fe-sel b{flex:1}
.gsd.gsd-v-table .gsd-fe-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:0 2px;font:400 13px/1.3 var(--gsd-sans);color:var(--gsd-text)}
/* a switch turned on, the app's small antd switch in the product's primary */
.gsd.gsd-v-table .gsd-fe-tg{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:var(--gsd-ai)}
.gsd.gsd-v-table .gsd-fe-tg::after{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#FFFFFF}
.gsd.gsd-v-table .gsd-fe-if{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 2px;font:400 13px/1.3 var(--gsd-sans);color:var(--gsd-text)}
.gsd.gsd-v-table .gsd-fe-if>span:first-child{flex:none}
.gsd.gsd-v-table .gsd-fe-cond{min-width:0;padding:5px 9px;border-radius:8px;background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1px var(--gsd-ai-line);font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-text)}
.gsd.gsd-v-table .gsd-fe-cond b{font-weight:600;color:var(--gsd-ai-ink)}
/* a still from 420 px of pane: one step up, as every still of the table */
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-table .gsd-fe{padding:16px 16px 18px}
  .gsd.gsd-still.gsd-v-table .gsd-fe-t{font-size:13.5px}
  .gsd.gsd-still.gsd-v-table :is(.gsd-fe-q,.gsd-fe-sel) b,.gsd.gsd-still.gsd-v-table :is(.gsd-fe-sw,.gsd-fe-if){font-size:13.5px}
  .gsd.gsd-still.gsd-v-table .gsd-fe-in>li,.gsd.gsd-still.gsd-v-table .gsd-fe-cond{font-size:13px}
}

/* ---- part=people: how the Find people column finds the people (demo-table.php): the table's Companies tab with the
   column (gs.front.app ActionFindPeopleCell.tsx, actionCells.module.scss fp*) under a header that names the tab with the
   table beside it, as Signals' Plays tab, and one cell open in its drawer (drawer/FindPeopleResultPanel.tsx): who to
   find, the search AI built (AI Search's own line and chips), the people found with their roles, the run. From 560 px
   of pane the drawer stands beside the grid, as the app opens it, its edge on the open cell; under it on a phone. The
   grid keeps two columns at every width, the company and what the column found, its rows the table's heights (62 px
   from 420 px of pane, as every still of the table). Found in the text ink, the faces before the count; the open cell
   the app's active cell (the primary's tint and edge); Searching… with the spinner and Queued… in the muted ink. ----- */
.gsd.gsd-v-table[data-gsd-part=people]{max-width:780px}
.gsd.gsd-v-table .gsd-fp-tb{min-width:0;margin-left:auto;font:400 12.5px/1.2 var(--gsd-sans)}
.gsd.gsd-v-table .gsd-fp-tb>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-fpw{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.gsd.gsd-v-table.gsd-fit[data-gsd-part=people] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.gsd.gsd-v-table.gsd-fit[data-gsd-part=people] :is(.gsd-gh,.gsd-tr)>.gsd-k2{display:flex}
.gsd.gsd-v-table[data-gsd-part=people] .gsd-tr:last-child{border-bottom:0}
.gsd.gsd-v-table .gsd-fp{display:inline-flex;align-items:center;gap:8px;min-width:0;font:500 13px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap}
.gsd.gsd-v-table .gsd-fp-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table :is(.gsd-fp-n,.gsd-fp-q,.gsd-fp-w){font-weight:400}
.gsd.gsd-v-table :is(.gsd-fp-q,.gsd-fp-w) .gsd-fp-t{color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-fp-q .gsd-spin{width:12px;height:12px;animation:none;border-top-color:var(--gsd-ai)}
.gsd.gsd-v-table .gsd-fp-fc{display:inline-flex;flex:none;gap:3px}
.gsd.gsd-v-table .gsd-fp-fc .gsd-ini{width:21px;height:21px;font-size:8.5px}
.gsd.gsd-v-table .gsd-fp-n .gsd-fp-t{color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-tr>.gsd-fp-open{background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1.5px var(--gsd-ai)}

/* the drawer: a quiet head (the column's glyph, its name, the company), then the sections in the drawer's type */
.gsd.gsd-v-table .gsd-fpd{display:flex;flex-direction:column;gap:9px;min-width:0;padding:14px 16px 16px;border-top:1px solid var(--gsd-line2);background:var(--gsd-bg)}
.gsd.gsd-v-table .gsd-fpd-h{display:flex;align-items:center;gap:10px;min-width:0;padding-bottom:12px;margin-bottom:3px;border-bottom:1px solid var(--gsd-line2)}
.gsd.gsd-v-table .gsd-fpd-i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--gsd-ai-soft);box-shadow:inset 0 0 0 1px var(--gsd-ai-line);color:var(--gsd-ai)}
.gsd.gsd-v-table .gsd-fpd-i svg{width:16px;height:16px}
.gsd.gsd-v-table .gsd-fpd-h>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsd.gsd-v-table .gsd-fpd-h b{font:600 14px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-fpd-h small{font:400 12.5px/1.25 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-fpd .gsd-lbl{margin-bottom:-3px}
.gsd.gsd-v-table .gsd-fpd-who{padding:9px 12px;border:1px solid var(--gsd-line);border-radius:10px;font:400 13px/1.4 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-fpd .gsd-aih{margin-top:3px}
.gsd.gsd-v-table .gsd-fpd .gsd-chip{height:28px;padding:0 10px;font-size:12px}
.gsd.gsd-v-table .gsd-fpd-fh{display:flex;align-items:center;gap:8px;margin-top:5px;font:600 12.5px/1.2 var(--gsd-sans);color:var(--gsd-ink)}
.gsd.gsd-v-table .gsd-fpd-fh .gsd-n{padding:3px 6px;font-size:11px}
.gsd.gsd-v-table .gsd-fpd-l{display:flex;flex-direction:column;gap:2px;margin:0 -6px}
.gsd.gsd-v-table .gsd-fpd-l>li{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 6px;border-radius:8px}
.gsd.gsd-v-table .gsd-fpd-l .gsd-ini{width:28px;height:28px;font-size:10.5px}
.gsd.gsd-v-table .gsd-fpd-l>li>span:not(.gsd-ini){display:flex;flex-direction:column;gap:1px;min-width:0}
.gsd.gsd-v-table .gsd-fpd-l b{font:500 13px/1.25 var(--gsd-sans);color:var(--gsd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-fpd-l small{font:400 12px/1.25 var(--gsd-sans);color:var(--gsd-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsd.gsd-v-table .gsd-fpd-f{display:flex;align-items:center;gap:8px;min-width:0;font:400 12px/1.3 var(--gsd-sans);color:var(--gsd-mute)}
.gsd.gsd-v-table .gsd-fpd-f>span{min-width:0;text-wrap:pretty}
.gsd.gsd-v-table .gsd-fpd-f:first-of-type{margin-top:3px;padding-top:11px;border-top:1px solid var(--gsd-line2)}
.gsd.gsd-v-table .gsd-fpd-f+.gsd-fpd-f{margin-top:-3px}
.gsd.gsd-v-table .gsd-fpd-f svg{flex:none;width:14px;height:14px;color:var(--gsd-faint)}
.gsd.gsd-v-table .gsd-fpd-f b{font-weight:600;color:var(--gsd-text)}
.gsd.gsd-v-table .gsd-fpd-f .gsd-fpd-ok{color:var(--gsd-ok)}
/* a phone keeps the first four companies (the open one among them) over the drawer */
@container gsd (max-width:559px){
  .gsd.gsd-v-table[data-gsd-part=people] .gsd-tr:nth-child(n+6){display:none}
  .gsd.gsd-v-table[data-gsd-part=people] .gsd-tr:nth-child(5){border-bottom:0}
}
@container gsd (min-width:560px){
  .gsd.gsd-v-table .gsd-fpw{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .gsd.gsd-v-table .gsd-fpw>.gsd-grid{display:flex;flex-direction:column;align-self:stretch;border-right:1px solid var(--gsd-line2)}
  .gsd.gsd-v-table .gsd-fpd{border-top:0}
  /* the rows share what the drawer adds to the grid's height, so the last one reaches the window's edge */
  .gsd.gsd-v-table[data-gsd-part=people] .gsd-fpw .gsd-tr{flex:1 0 auto}
}
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-table .gsd-fp{font-size:13.5px}
  .gsd.gsd-still.gsd-v-table .gsd-fp-tb{font-size:13px}
  .gsd.gsd-still.gsd-v-table .gsd-fpd .gsd-lbl,.gsd.gsd-still.gsd-v-table .gsd-fpd .gsd-aih{font-size:13px;line-height:16px}
  .gsd.gsd-still.gsd-v-table .gsd-fpd-who,.gsd.gsd-still.gsd-v-table .gsd-fpd-l b{font-size:13.5px}
  .gsd.gsd-still.gsd-v-table .gsd-fpd .gsd-chip{height:30px;font-size:12.5px}
  .gsd.gsd-still.gsd-v-table :is(.gsd-fpd-l small,.gsd-fpd-f){font-size:12.5px}
  .gsd.gsd-still.gsd-v-table .gsd-fpd-fh{font-size:13px}
}

/* ---- part=data: the person and company data columns two Enrich columns add (demo-table.php), each data point a plain
   text cell, as the app draws a text column: the name alone (the title is the Position column), the person's Position
   and Location under the person glyph, the company's Industry and Company size under the company glyph. The rows are
   as tall as the name's (56 px, the face a step smaller, as part=context), and a value takes a second line rather than
   an ellipsis, which a 56 px row holds. From 520 px of pane the five columns, each as wide as its head and its longest
   word in every set; at a block's 600 px every value of the default set reads on one line. On a phone the title comes
   back under the name (two lines at most, the row growing round it) and the row keeps Location and Industry. ---------------------------------------------------------------------------- */
.gsd.gsd-v-table[data-gsd-part=data]{max-width:720px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.25fr) minmax(0,1.28fr) minmax(0,1.19fr) minmax(0,.98fr) minmax(0,1.28fr)}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] :is(.gsd-gh,.gsd-tr)>span{padding-left:10px;padding-right:10px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr{height:auto;min-height:56px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr>span{padding-top:8px;padding-bottom:8px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr .gsd-k1{gap:9px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr .gsd-av{flex:none;width:28px;height:28px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr .gsd-k1 b{font-size:13px}
.gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr .gsd-k1 small{display:none}
.gsd.gsd-v-table .gsd-dv{display:-webkit-box;min-width:0;overflow:hidden;font:400 12.5px/1.3 var(--gsd-sans);color:var(--gsd-text);-webkit-box-orient:vertical;-webkit-line-clamp:2}
@container gsd (min-width:420px){
  .gsd.gsd-still.gsd-v-table .gsd-dv{font-size:13px}
}
@container gsd (max-width:519px){
  .gsd.gsd-still.gsd-v-table[data-gsd-part=data] :is(.gsd-gh,.gsd-tr){grid-template-columns:minmax(0,1.32fr) minmax(0,1fr) 96px}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=data] :is(.gsd-gh,.gsd-tr)>:is(:nth-child(2),:nth-child(5)){display:none}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=data] :is(.gsd-gh,.gsd-tr)>:nth-child(4){border-right:0}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-tr .gsd-k1 small{display:-webkit-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .gsd.gsd-still.gsd-v-table[data-gsd-part=data] .gsd-dv{font-size:12px}
}