/**
 * Section Surfaces (SS-3+) — the Sections panel row's redesigned chrome.
 *
 * Linked AFTER section-list.css deliberately: this sheet re-disposes chrome
 * that sheet declares (the grip and count badges become reveal-on-intent),
 * and later-sheet order is what lets it do so without editing every rule it
 * modifies. Deleting this file plus reverting the SS commits is the
 * initiative's whole revert story (plan D5).
 *
 * The reveal rule: chrome you can act on right now shows; a FACT about the
 * row (the attention flag, the fact line, the shared tag) is never hidden.
 * All reveals are opacity-only — no display toggles, no layout shift — and a
 * coarse pointer sees everything all the time, because hover does not exist
 * there.
 */

/* ── Chrome on demand ─────────────────────────────────────────────────────
   Grip and count badges rest hidden; hover, keyboard focus, selection or
   selecting-mode reveals them. The grip's 44x44 ::before hit area is
   untouched — an invisible grip is still grabbable mid-reveal, and in
   selecting mode it stays VISIBLE (deviation from the prototype, which hid
   it: a multi-selection is dragged BY the grip, and hiding the affordance
   would orphan bulk drag). */
.pb-sl-row .pb-sl-grip,
.pb-sl-row .pb-sl-overrides-badge,
.pb-sl-row .pb-sl-img-badge,
.pb-sl-row .pb-sl-svg-badge,
.pb-sl-row .pb-sl-schedule-badge {
  opacity: 0;
  transition: opacity var(--pb-transition);
}

.pb-sl-row:hover .pb-sl-grip,
.pb-sl-row:focus-within .pb-sl-grip,
.pb-sl-row.pb-sl-selected .pb-sl-grip,
.pb-sl-row.pb-sl-active .pb-sl-grip,
.pb-sl-selecting .pb-sl-row .pb-sl-grip,
.pb-sl-row:hover .pb-sl-overrides-badge,
.pb-sl-row:focus-within .pb-sl-overrides-badge,
.pb-sl-row.pb-sl-selected .pb-sl-overrides-badge,
.pb-sl-row.pb-sl-active .pb-sl-overrides-badge,
.pb-sl-row:hover .pb-sl-img-badge,
.pb-sl-row:focus-within .pb-sl-img-badge,
.pb-sl-row.pb-sl-selected .pb-sl-img-badge,
.pb-sl-row.pb-sl-active .pb-sl-img-badge,
.pb-sl-row:hover .pb-sl-svg-badge,
.pb-sl-row:focus-within .pb-sl-svg-badge,
.pb-sl-row.pb-sl-selected .pb-sl-svg-badge,
.pb-sl-row.pb-sl-active .pb-sl-svg-badge,
.pb-sl-row:hover .pb-sl-schedule-badge,
.pb-sl-row:focus-within .pb-sl-schedule-badge,
.pb-sl-row.pb-sl-selected .pb-sl-schedule-badge,
.pb-sl-row.pb-sl-active .pb-sl-schedule-badge {
  opacity: 1;
}

/* The lock on a shared row is a FACT (this row is shared), not actionable
   chrome — it stays visible at rest. */
.pb-sl-row .pb-sl-grip.pb-sl-lock {
  opacity: 0.6;
}

/* A media panel pinned open keeps its badge visible — the control that
   opened a surface must not vanish while the surface is up. */
.pb-sl-row.pb-sl-media-open .pb-sl-img-badge,
.pb-sl-row.pb-sl-media-open .pb-sl-svg-badge {
  opacity: 1;
}

/* Hover does not exist on a coarse pointer: everything rests visible. */
@media (pointer: coarse) {
  .pb-sl-row .pb-sl-grip,
  .pb-sl-row .pb-sl-overrides-badge,
  .pb-sl-row .pb-sl-img-badge,
  .pb-sl-row .pb-sl-svg-badge,
  .pb-sl-row .pb-sl-schedule-badge {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-sl-row .pb-sl-grip,
  .pb-sl-row .pb-sl-overrides-badge,
  .pb-sl-row .pb-sl-img-badge,
  .pb-sl-row .pb-sl-svg-badge,
  .pb-sl-row .pb-sl-schedule-badge {
    transition: none;
  }
}

/* ── The shared tag — the row says it is shared, since the group header is
   gone (D4). ── */
.pb-sl-shared-tag {
  margin-left: var(--pb-space-2);
  font-size: var(--pb-font-xs);
  font-style: normal;
  color: var(--pb-text-dim);
  font-weight: 400;
}

/* ── A derived name is evidence, not a chosen label — quoted (by the JS)
   and lighter, so nobody mistakes what the product read for what a person
   typed. ── */
.pb-sl-label-derived {
  font-weight: 400;
  color: var(--pb-text);
}

/* ── The attention flag — open audit findings for THIS section, on the row.
   A fact, never hover-hidden. Amber for warnings; the blocking modifier
   borrows the danger tone. ── */
.pb-sl-flag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: var(--pb-radius);
  font-size: var(--pb-font-xs);
  font-weight: 600;
  color: var(--pb-warning-text);
  background: var(--pb-warning-bg);
  cursor: pointer;
}

.pb-sl-flag svg {
  width: 11px;
  height: 11px;
}

.pb-sl-flag.pb-sl-flag-blocking {
  color: var(--pb-danger);
  background: var(--pb-danger-bg);
}

.pb-sl-flag:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 1px;
}

/* ── SS-0 finding: the rename label was a 202x16 role="button" — a real
   sub-24px target. Pad the hit area to 24px and pull the box back with
   negative margins so the text does not move. ── */
.pb-sl-label {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: -4px;
  margin-bottom: -4px;
}

/* ── SS-4: the search field — the emitter the complete filter backend never
   had. Pill shape, leading glyph; the clear affordance appears with a
   query. ── */
.pb-sl-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--pb-space-2);
  margin: 0 var(--pb-space-3) var(--pb-space-2);
  padding: 0 var(--pb-space-3);
  background: var(--pb-content-bg);
  border: 1px solid var(--pb-border);
  border-radius: 999px;
  color: var(--pb-text-dim);
  transition:
    border-color var(--pb-transition),
    box-shadow var(--pb-transition);
}

.pb-sl-search-wrap:focus-within {
  border-color: var(--pb-accent);
  box-shadow: var(--pb-shadow-ring);
  color: var(--pb-accent);
}

.pb-sl-search {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: var(--pb-space-2) 0;
  font-size: var(--pb-font-sm);
  color: var(--pb-text);
}

.pb-sl-search::placeholder {
  color: var(--pb-text-dim);
}

.pb-sl-search-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--pb-hover);
  color: var(--pb-text-dim);
  cursor: pointer;
  font-size: var(--pb-font-md);
  line-height: 1;
  padding: 0;
}

.pb-sl-search-clear[hidden] {
  display: none;
}

.pb-sl-search-empty {
  padding: var(--pb-space-4) var(--pb-space-3);
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
  text-align: center;
}

/* ── SS-4: the clipboard TILE — in the list, at the end (PP-0). The dashed
   accent border says "this is an insertion you can make", the same visual
   sentence the picker's create tiles speak. ── */
.pb-sl-clip-tile {
  display: flex;
  align-items: center;
  gap: var(--pb-space-3);
  width: 100%;
  padding: var(--pb-space-3);
  margin: var(--pb-space-2) 0;
  border: 1px dashed var(--pb-accent);
  border-radius: var(--pb-radius-lg);
  background: var(--pb-accent-tint);
  cursor: pointer;
  text-align: left;
  transition: background var(--pb-transition);
}

.pb-sl-clip-tile:hover {
  background: var(--pb-row-bg-selected);
}

.pb-sl-clip-tile:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 1px;
}

.pb-sl-clip-tile-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-text-dim);
}

.pb-sl-clip-tile-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pb-sl-clip-tile-title {
  font-size: var(--pb-font-sm);
  font-weight: 600;
  color: var(--pb-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-sl-clip-tile-sub {
  font-size: var(--pb-font-xs);
  color: var(--pb-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── SS-5 audit remediation: variant detail stage ─────────────────────────── */
.pb-vp-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: var(--pb-space-5);
  gap: var(--pb-space-4);
}

.pb-vp-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-3);
  flex-wrap: wrap;
}

.pb-vp-detail-body {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(240px, 0.85fr);
  gap: var(--pb-space-5);
  align-items: start;
  min-height: 0;
}

.pb-vp-detail-poster {
  width: 100%;
  min-height: 240px;
}

.pb-vp-detail-copy {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
  min-width: 0;
}

/* Name and handle share ONE row, handle at the end — the card's caption shape.
   `minmax(0, 1fr) auto` for the same reason the card uses it: the ellipsis has
   to land on the name, never on the identity. */
.pb-vp-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--pb-space-4);
  align-items: baseline;
}

.pb-vp-detail-title {
  margin: 0;
  font-size: var(--pb-font-xl);
  line-height: 1.2;
  color: var(--pb-text);
  min-width: 0;
}

.pb-vp-detail-handle {
  justify-self: end;
}

/* Bottom-left of the art, the same inset the cards use. `flex-wrap` because
   this stage lists EVERY derived tag rather than the card's first three, and a
   long set must stack up the art rather than run off its edge. */
.pb-vp-detail-chips {
  position: absolute;
  left: var(--pb-space-3);
  bottom: var(--pb-space-3);
  right: var(--pb-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-2);
  /* A tag explains the art; it is not a target on top of it. */
  pointer-events: none;
}

/* 2026-09-05: the detail stage lives inside the 520px popover card now (the
   host change), where a two-column body (280 + 240 + gap) cannot fit at ANY
   viewport width — so the split is scoped to the card, not to a breakpoint.
   This also retires the 720px media query that MOBILE-P1 (design-tokens)
   correctly flagged as an off-band breakpoint: a phone sheet is the same
   single column, and it needs no second rule to get there. */
.pb-coll-popover .pb-vp-detail {
  padding: var(--pb-space-4) 0 0;
}

.pb-coll-popover .pb-vp-detail-body {
  grid-template-columns: 1fr;
}

/* ── The variant card's metadata (2026-09-05) ──────────────────────────────
   `prototypes/variant-picker-demo.html` places four things the kit's default
   card stacks in a column under the poster:

     · the NAME and the HANDLE share one caption row — name left, handle right,
       baselines aligned — because the handle is the only unique thing a
       variant has (three cards in the first ten share the name "Top Bar
       Dropdown") and a second line under the name makes it the quietest thing
       on the card instead of the most useful;
     · the FEATURE TAGS sit on the art, bottom-left, where the eye already is
       while it compares one nav bar against the next;
     · the CURRENT / SOURCE badge sits on the art, in a top corner.

   Done with NO engine change and no duplicated node: `.pb-coll-text` becomes
   `display: contents`, which promotes the title, the handle and the tag row to
   grid items of the card itself, and everything that is not one of the two
   caption items defaults to the `frame` area and overlays the poster. A future
   kit child (an overlay action) therefore lands on the art too, rather than
   pushing the caption down.

   Scoped to `.pb-vp-card`, the surface-owned class `toVariantItem` sets — no
   other collection surface can inherit any of it. */

.pb-vp-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'frame frame'
    'name handle';
  column-gap: var(--pb-space-4);
  row-gap: var(--pb-space-3);
}

/* The default IS the art. Only the two caption items are placed explicitly —
   and they are grandchildren, so `> *` cannot reach them. */
.pb-vp-card > * {
  grid-area: frame;
}

.pb-vp-card > .pb-coll-text {
  display: contents;
}

.pb-vp-card > .pb-coll-text > .pb-coll-title {
  grid-area: name;
  align-self: baseline;
}

/* The handle's LOOK: monospace on a field-tinted pill. One rule, two selectors
   — the card's caption and the detail stage's title row show the same identity
   and must not drift into two treatments of it. Placement stays per-surface
   below, because a grid area is not a look. */
.pb-vp-card > .pb-coll-text > .pb-coll-meta-line,
.pb-vp-detail-handle {
  font-family: var(--pb-font-family-mono);
  font-size: var(--pb-font-sm);
  color: var(--pb-text-dim);
  background: var(--pb-field-bg);
  border-radius: var(--pb-radius-sm);
  padding: 1px 5px;
}

/* `justify-self: end` and not `margin-left: auto`, because in a grid the column
   is already `auto`-sized — the name's `minmax(0, 1fr)` is what makes the
   ellipsis land on the name rather than on the identity. */
.pb-vp-card > .pb-coll-text > .pb-coll-meta-line {
  grid-area: handle;
  align-self: baseline;
  justify-self: end;
}

.pb-vp-card > .pb-coll-text > .pb-coll-item-chips {
  grid-area: frame;
  align-self: end;
  justify-self: start;
  display: flex;
  gap: var(--pb-space-2);
  margin: var(--pb-space-3);
  /* A tag explains the art; it is not a target on top of it. */
  pointer-events: none;
}

/* The prototype caps the tags at three. In CSS rather than in the model, so
   the detail stage still lists every feature the classifier derived — and so
   a hidden tag is out of the accessibility tree too, which is what makes the
   card and its screen-reader rendering say the same thing. */
.pb-vp-card > .pb-coll-text > .pb-coll-item-chips > :nth-child(n + 4) {
  display: none;
}

/* The feature tag's LOOK — one rule, both stages. The card's caption and the
   detail stage show the same badge and must not drift into two treatments of
   it; the placement below is per-stage because a grid area is not a look.

   The tags are a scrim ON A SCREENSHOT, so they are light in BOTH registers —
   the same deliberate exception, and for the same reason, as the selection bar
   being dark in both (collection.css). A theme-following surface here would
   vanish into whichever templates happen to be pale, which is why the ink is a
   literal: it is `--pb-text-bright`'s LIGHT value, pinned, so the pill reads the
   same on a dark screenshot in a dark theme as it does on a pale one in a
   light theme. */
.pb-vp-card .pb-coll-item-chips .pb-coll-badge,
.pb-vp-detail-chips .pb-coll-badge {
  border: 0;
  border-radius: var(--pb-radius-sm);
  padding: 1px 5px;
  font-size: var(--pb-font-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

/* ── The source badge, top-RIGHT of the art ────────────────────────────────
   WHICH WEBSITE TEMPLATE THIS CAME FROM. Deliberately the SAME treatment as
   `.pb-asm-source-badge` in palette.css — the dark blurred pill the Add
   Section modal has shown on cross-template section cards all along — because
   two surfaces answering the same question ("whose section is this?") in two
   visual languages is how a user learns to read one and not the other. The
   corner differs and only the corner: Add Section's right corner is claimed by
   its star / get-code action bar, and this card has no action bar.

   It is set only for a variant that came from a template OTHER than the
   project's own (card-model.js `variantSource`), so it never states the
   obvious. */
.pb-vp-card > .pb-coll-badge-corner {
  align-self: start;
  justify-self: end;
  margin: var(--pb-space-3);
  max-width: calc(100% - 2 * var(--pb-space-6));
  padding: 2px var(--pb-space-3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--pb-radius-pill);
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: var(--pb-font-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* A badge explains the art; it is not a target on top of it. */
  pointer-events: none;
}

/* …and CURRENT, top-LEFT in the accent. One node and one slot, because a card
   is never both — and the two corners are the Add Section split as well
   (Custom and Current left, provenance and actions right). */
.pb-vp-card.is-current > .pb-coll-badge-corner {
  justify-self: start;
  border-color: transparent;
  background: var(--pb-accent);
  color: var(--pb-on-accent);
  box-shadow: none;
  font-weight: 700;
}

/* ── The scope toggle ──────────────────────────────────────────────────────
   On the HEADER row, right-aligned before the close button — the same
   segmented control, in the same corner, as the Add Section modal's. It was a
   pressed chip in the facet row, which put "whose variants?" inside the row
   that answers "which kind?".

   Placement and sizing are the kit's (`.pb-dialog-header-trailing`,
   `.pb-seg-compact`). The ONE thing this surface owns is the gap before the
   close button: the popover header runs a tighter padding register than the
   modal's, so it declares that difference as a value rather than as a second
   copy of the rule. */
.pb-coll-popover-header .pb-dialog-header-trailing {
  --pb-header-trailing-gap: var(--pb-space-4);
}

/* ── The detail stage's header row ─────────────────────────────────────────
   Back leads it and "Use this variant" takes the trailing slot the scope
   toggle vacates. The heading keeps the middle and keeps shrinking, so a long
   variant name never pushes the commit action off the row. */
.pb-vp-header-detail .pb-coll-popover-heading {
  min-width: 0;
}

.pb-coll-detail-back,
.pb-vp-detail-use {
  flex-shrink: 0;
}

/* ── The card is the control ───────────────────────────────────────────────
   `activateOnItemClick` makes the whole card open the detail stage, but a
   surface that acts on click and shows a text cursor is lying about what it
   is. The Add Section grid has said so since PP-1 (`.pb-section-card`); this
   is the same statement, and the same hover: the ART lifts, not the caption,
   because the art is what the pointer is over and a caption that moved would
   shift the row.

   `:not(.is-current)` — the current variant's card is `disabled` (card-model
   sets `state.disabled`), and offering a pointer over a card that cannot be
   activated is the "affordance offered where it cannot act" defect. */
.pb-vp-card:not(.is-current) {
  cursor: pointer;
}

.pb-vp-card > .pb-coll-poster,
.pb-vp-card .pb-coll-poster {
  transition:
    box-shadow 200ms ease,
    transform 200ms ease;
}

.pb-vp-card:not(.is-current):hover .pb-coll-poster,
.pb-vp-card:not(.is-current):focus-within .pb-coll-poster {
  box-shadow: var(--pb-shadow-panel);
}

@media (prefers-reduced-motion: reduce) {
  .pb-vp-card .pb-coll-poster {
    transition: none;
  }
}

@media (forced-colors: active) {
  /* The scrims are the one place this sheet paints its own colours; in forced
     colors they must become system pairs or they disappear. */
  .pb-vp-card .pb-coll-item-chips .pb-coll-badge,
  .pb-vp-card > .pb-coll-badge-corner {
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pb-vp-card.is-current > .pb-coll-badge-corner {
    color: HighlightText;
    background: Highlight;
    border-color: HighlightText;
  }
}