/* comp-samples: the control samples Shajee kept on 24 Oct, which the three styles in ext/comp.js are made of (generated; edit by hand).
   One @scope block per sample: html[data-c-<item>="<id>"] applies it to the site, a cell on /design-system shows it.
   Each scope stops at a nested [data-c-<item>], so a cell can show another sample than the page. */
@scope ([data-c-btn="b1"]) to (:scope [data-c-btn]) {
  :scope :is(.btn, .btn-arrow, .sub-pill, .hs-go, .btn-view) { --c-r: 6px; --c-lab-tt: none; --c-lab-ls: 0; }
}
@scope ([data-c-btn="b3"]) to (:scope [data-c-btn]) {
  :scope :is(.btn, .btn-arrow, .sub-pill, .hs-go, .btn-view) { --c-r: 0px; --c-lab-tt: none; --c-lab-ls: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
  :scope :is(.btn, .btn-arrow, .sub-pill, .hs-go, .btn-view):focus-visible { outline-offset: -4px; }
  :scope .btn-view { background: var(--b-solid); color: var(--b-solid-ink); }
}
@scope ([data-c-flt="f3"]) to (:scope [data-c-flt]) {
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a) { --c-r: 0px; --c-chip-bg: var(--b-tile); --c-chip-bg-h: var(--b-accent-200); --c-chip-bg-on: var(--b-primary); --c-chip-bgi: none;
    --c-chip-ink: var(--ink); --c-chip-ink-h: var(--ink); --c-chip-ink-on: #fff; --c-chip-ring: none; --c-chip-ring-h: none; --c-chip-ring-on: none; --c-chip-px: 12px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); font-weight: 600; }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a)::before { display: none; }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a):focus-visible { outline-offset: -4px; }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a) b { color: inherit; }
  :scope .hero3 .hero2-try a { border-color: transparent; --c-chip-bg: rgba(0,0,0,.28); --c-chip-ink: #fff; --c-chip-bg-h: var(--b-primary); --c-chip-ink-h: #fff; }
}
@scope ([data-c-flt="f5"]) to (:scope [data-c-flt]) {
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a) { --c-chip-bg: transparent; --c-chip-bg-h: transparent; --c-chip-bg-on: transparent; --c-chip-bgi: none; --c-chip-ring: none; --c-chip-ring-h: none; --c-chip-ring-on: none; --c-chip-line: transparent; --c-chip-line-h: transparent; --c-chip-line-on: transparent; --c-r: 0px; --c-chip-ink: var(--ink-2); --c-chip-ink-h: var(--ink); --c-chip-ink-on: var(--ink); --c-chip-ring-on: inset 0 -3px 0 var(--b-primary); --c-chip-px: 2px; --c-chip-h: 40px; font-weight: 500; }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a)::before { display: none; }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a):hover { box-shadow: inset 0 -1px 0 var(--ink); }
  :scope :is(.hd-chips, .ov-chips, .sx-chips, .tm-chips, .ptn-chips, .hero2-try) { column-gap: var(--sp-3); box-shadow: inset 0 -1px 0 var(--rule-2); }
  :scope :is(button.hd-chip, button.ov-chip, .sx-chip, button.tm-chip, .ptn-chip, .hero2-try a) b { font-weight: 400; color: var(--ink-3); }
  :scope .hero3 .hero2-try a { border-color: transparent; --c-chip-ink: var(--b-on-ember-2, #f4dcd6); --c-chip-ink-h: #fff; --c-chip-ink-on: #fff; text-decoration-color: rgba(255,255,255,.45); }
  :scope .hero3 .hero2-try { box-shadow: inset 0 -1px 0 rgba(255,255,255,.3); }
}
@scope ([data-c-tag="t2"]) to (:scope [data-c-tag]) {
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag) { --c-chip-bg: transparent; --c-chip-bg-h: transparent; --c-chip-bg-on: transparent; --c-chip-bgi: none; --c-chip-ring: none; --c-chip-ring-h: none; --c-chip-ring-on: none; --c-chip-line: transparent; --c-chip-line-h: transparent; --c-chip-line-on: transparent; --c-r: 0px; --c-chip-ink: var(--ink); --c-chip-px: 0px; --c-chip-h: 0px; font-weight: 600; margin-right: 0; }
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag)::before { display: none; }
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) { column-gap: 0; }
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) > * + * { padding-left: var(--sp-1); margin-left: var(--sp-1); box-shadow: inset 1px 0 0 var(--rule-2); }
}
@scope ([data-c-tag="t4"]) to (:scope [data-c-tag]) {
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag) { --c-chip-bg: transparent; --c-chip-bg-h: transparent; --c-chip-bg-on: transparent; --c-chip-bgi: none; --c-chip-ring: none; --c-chip-ring-h: none; --c-chip-ring-on: none; --c-chip-line: transparent; --c-chip-line-h: transparent; --c-chip-line-on: transparent; --c-r: 0px; --c-chip-ink: var(--ink-2); --c-chip-px: 0px; --c-chip-h: 0px; font-weight: 500; }
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag)::before { display: none; }
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) { column-gap: var(--sp-1); }
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag) { gap: 0; padding-inline: 0 !important; }  /* no chip padding: the slash spacing is even and the first tag lines up with the text */
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) > :not(:last-child)::after { content: "/"; margin-left: var(--sp-1); color: var(--rule-2); font-weight: 400; }
}
@scope ([data-c-tag="t6"]) to (:scope [data-c-tag]) {
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag) { --c-chip-bg: transparent; --c-chip-bg-h: transparent; --c-chip-bg-on: transparent; --c-chip-bgi: none; --c-chip-ring: none; --c-chip-ring-h: none; --c-chip-ring-on: none; --c-chip-line: transparent; --c-chip-line-h: transparent; --c-chip-line-on: transparent; --c-r: 0px; --c-chip-ink: var(--ink-2); --c-chip-px: 0px; --c-chip-h: 0px; font-weight: 400; }
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag)::before { display: none; }
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) { column-gap: var(--sp-1); }
  :scope :is(.card-tags > *, .tp-tags > *, .evx-tags > *, .fchip, span.tagbtn, .evx-tag) { gap: 0; }
  :scope :is(.card-tags, .tp-tags, .evx-tags, .fchips) > :not(:last-child)::after { content: ","; }
}
@scope ([data-c-kv="k1"]) to (:scope [data-c-kv]) {
  :scope .pj-tags li { --c-chip-bg: transparent; --c-chip-px: 0px; --c-chip-h: 0px; --c-r: 0px; }
  :scope .pj-tags { gap: var(--sp-0-5); }
  :scope .pj-f { display: inline; margin: 0; font-size: 14.5px; color: var(--ink-3); }
  :scope .pj-f::after { content: ":"; }
}
@scope ([data-c-kv="k3"]) to (:scope [data-c-kv]) {
  :scope .pj-tags li { --c-chip-bg: transparent; --c-chip-px: 0px; --c-chip-h: 0px; --c-r: 0px; }
  :scope .pj-tags { gap: var(--sp-0-5); }
  :scope .pj-f { display: inline; margin: 0 var(--sp-1) 0 0; font-size: 13.5px; font-weight: 700; color: var(--b-primary); }
}
@scope ([data-c-kv="k5"]) to (:scope [data-c-kv]) {
  :scope .pj-tags li { --c-chip-bg: transparent; --c-chip-px: 0px; --c-chip-h: 0px; --c-r: 0px; }
  :scope .pj-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  :scope .pj-tags li { display: inline-flex; align-items: center; min-height: 28px; padding: var(--sp-0-5) var(--sp-1) var(--sp-0-5) 0; background: var(--b-tile); font-size: 13.5px; line-height: 1.35; }
  :scope .pj-f { display: flex; align-items: center; align-self: stretch; margin: calc(var(--sp-0-5) * -1) var(--sp-1) calc(var(--sp-0-5) * -1) 0; padding: 0 var(--sp-1); background: var(--b-ink-surface); color: var(--b-ink-surface-ink); font-size: 12.5px; }
}
@scope ([data-c-meta="m3"]) to (:scope [data-c-meta]) {
  :scope * { --c-lab-tt: none; --c-lab-ls: 0; --c-lab-min: 13px; }
  :scope :is(.card-meta .type, .nw-meta .t) { color: var(--b-primary); font-weight: 700; }
  :scope .cm-l > * + *::before, :scope .cm-r > * + *::before { width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--b-accent-2); }
  :scope .nw-meta { align-items: center; }
  :scope .nw-meta .sep { display: inline-block; flex: none; width: 6px; height: 6px; overflow: hidden; border-radius: 50%; color: transparent; background: var(--b-accent-2); }
}
@scope ([data-c-meta="m6"]) to (:scope [data-c-meta]) {
  :scope * { --c-lab-tt: none; --c-lab-ls: 0; }
  :scope .cm-l > * + *::before, :scope .cm-r > * + *::before { content: "/"; top: 0; width: auto; height: auto; margin-top: 0; border-radius: 0; background: none; color: var(--ink-3); }
  :scope .nw-meta .sep { font-size: 0; }
  :scope .nw-meta .sep::after { content: "/"; font-size: 13px; color: var(--ink-3); }
}
@scope ([data-c-meta="m7"]) to (:scope [data-c-meta]) {
  :scope * { --c-lab-tt: none; --c-lab-ls: 0; }
  :scope :is(.card-meta .type, .nw-meta .t) { font-style: italic; font-weight: 600; }
}
@scope ([data-c-loc="l3"]) to (:scope [data-c-loc]) {
  :scope .lat-cap { right: auto; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); background: #fff; color: var(--ink); font-weight: 700; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  :scope .lat-cap .ico { display: none; }
  :scope .lat-cap::before, :scope .sf-label::before { content: ""; flex: none; width: 9px; height: 11px; background: var(--b-primary); clip-path: polygon(0 0, 100% 30%, 0 60%); }
  :scope .gcard .sf-label::before { background: var(--b-accent-on-dark); }
}
@scope ([data-c-loc="l4"]) to (:scope [data-c-loc]) {
  :scope .lat-cap { left: 16px; right: auto; bottom: 16px; padding: var(--sp-1) var(--sp-1-5) var(--sp-1) var(--sp-1); border-radius: 999px; background: var(--b-tint-100); color: var(--ink); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  /* filled pin: the drop solid, its dot cut out in the pill's own colour */
  :scope .lat-cap .ico path { fill: currentColor; }
  :scope .lat-cap .ico circle { fill: var(--b-tint-100); stroke: none; }
  :scope .sf-label { font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
  :scope .sf-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live-dot 1.8s ease-out infinite; }
}
@scope ([data-c-pick="p1"]) to (:scope [data-c-pick]) {
  :scope .lat-pick { padding: 0; background: none; color: var(--b-primary); }
}
@scope ([data-c-pick="p3"]) to (:scope [data-c-pick]) {
  :scope .lat-pick { padding: var(--sp-0-5) var(--sp-2) var(--sp-0-5) var(--sp-1); border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
}
@scope ([data-c-pick="p4"]) to (:scope [data-c-pick]) {
  :scope .lat-pick { gap: var(--sp-1); padding: 0; background: none; color: var(--ink); }
  :scope .lat-pick::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--b-primary); }
}
@scope ([data-c-tog="g2"]) to (:scope [data-c-tog]) {
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs), :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) * { --c-r: 0px; }
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) { padding: 0; gap: var(--sp-2); background: none; box-shadow: inset 0 -1px 0 var(--rule-2); }
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) :is(button, [role='tab']) { padding-inline: 2px; background: none !important; box-shadow: none; }
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) :is(button, [role='tab']):is([aria-pressed='true'], [aria-selected='true']) { background: none; box-shadow: inset 0 -3px 0 var(--ink) !important; font-weight: 600; }
  :scope .rv-tabs .rv-thumb { display: none; }
  :scope .rv-tabs button { width: auto; }
}
@scope ([data-c-tog="g4"]) to (:scope [data-c-tog]) {
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs), :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) * { --c-r: 0px; }
  :scope :is(.seg, .cviews, .rv-tabs, .mp-seg, .mp-tabs, .ov-tabs) :is(button, [role='tab']):is([aria-pressed='true'], [aria-selected='true']), :scope .rv-thumb { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
}