/* Block "In Unibox"'s added element, the Classification filter open (parts/add-labels.html), printed by the feature
   template inside the block's figure after the demo's still (theme/inc/feature.php gs_feature_block(), the block's
   "add"). The kit's .k-card in the demo's tokens: each label a row with its tick box, the label as the app's chip and
   the count beside it, nothing picked. The still is Unibox's list (part=channels), so the figure becomes a row, the
   window on the left and the card on the right, 16 px from the window's edge, so it never covers a reply's time or
   its cue. Between 761 and 1200 the block stacks and the same row holds. Under 760 the card follows the still instead, under it. Nothing moves. Scoped to .pg-reply-classification, the
   class templates/page-parts.php puts on <main>. */

.pg-reply-classification .k-pic:has(>.rc-lb){grid-template-columns:minmax(0,1fr) 224px;align-items:center;justify-items:stretch}
.pg-reply-classification .k-pic:has(>.rc-lb)>.gsd{grid-column:1;grid-row:1;width:auto;min-width:0;margin:0}
.pg-reply-classification .rc-lb{
  --rc-ok:var(--ok,#12995F);
  position:relative;z-index:2;grid-column:2;grid-row:1;align-self:end;width:auto;margin:0 0 30px 16px;
}
.pg-reply-classification .rc-lb .k-card-h{justify-content:space-between;height:44px;padding:0 16px}
.pg-reply-classification .rc-lb .k-card-h span{font:600 14px/1.2 var(--sans);color:var(--ink)}
.pg-reply-classification .rc-lb .k-card-h small{font:400 12.5px/1.2 var(--sans);color:var(--mute)}

.pg-reply-classification .rc-lb-l{margin:0;padding:8px 10px 4px;list-style:none}
.pg-reply-classification .rc-lb-l li{display:flex;align-items:center;gap:10px;min-width:0;height:36px;padding:0 6px;border-radius:8px}
.pg-reply-classification .rc-ck{flex:none;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 28%,transparent)}
.pg-reply-classification .rc-sc{display:inline-flex;align-items:center;min-width:0;height:22px;padding:0 8px;border-radius:6px;background:var(--sunk);font:500 12.5px/1 var(--sans);color:var(--k-text);white-space:nowrap}
.pg-reply-classification .rc-sc-ok{background:color-mix(in srgb,var(--rc-ok) 14%,var(--panel));color:var(--k-ok-ink,var(--rc-ok))}
.pg-reply-classification .rc-lb-l b{margin-left:auto;font:500 13px/1 var(--mono);color:var(--mute)}
.pg-reply-classification .rc-lb-f{margin:0;padding:8px 16px 13px;border-top:1px solid var(--line);font:400 12.5px/1.3 var(--sans);color:var(--mute)}

/* from 1201 to 1279 the figure is narrower: it gives up 12 px of its side padding, as the waterfall's Log does */
@media (min-width:1201px) and (max-width:1279px){
  .pg-reply-classification .k-pic:has(>.rc-lb){padding-left:24px;padding-right:24px}
}

/* under 760 the still takes the figure's whole width and the card follows it, at its own width, so the list and the
   filter both stay in view */
@media (max-width:760px){
  .pg-reply-classification .k-pic:has(>.rc-lb){grid-template-columns:minmax(0,1fr)}
  .pg-reply-classification .rc-lb{grid-column:1;grid-row:2;align-self:auto;justify-self:end;width:min(100%,260px);margin:12px 0 0}
}