/* ChalkSpin component skin: Night Glow. Split from the design lab's _kit/components-skin.css (one rule per line); pairs with ../components.css. Theme files are listed per theme in themes.config.ts, so only the active theme's skin loads. */
@layer base, skin;
@layer skin {
  /* ==== Night Glow (option C): luminous glass, pills, soft glow, aurora drift, bloom ================== */
  [data-theme="glow"] .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--glow-aurora-lime); box-shadow: 0 0 10px var(--glow-aurora-lime) }
  [data-theme="glow"] .check input:not(:checked):not(:indeterminate):not([aria-invalid="true"]), [data-theme="glow"] .switch input:not(:checked) { border-color: var(--color-border-strong) }
  [data-theme="glow"] :is(.affix, .tag-input, .stepper) { border-color: var(--color-border-strong) }
  [data-theme="glow"] :is(.affix, .tag-input):hover { border-color: var(--color-text-secondary) }
  [data-theme="glow"] :is(.affix, .tag-input):focus-within { border-color: var(--color-brand) }
  [data-theme="glow"] :is(.theme-menu-panel, .menu, .popover) { --enter: translate3d(0, -8px, 0) scale(0.97); --enter-dur: var(--motion-duration-slow); border-color: var(--color-border-subtle); background: color-mix(in srgb, var(--color-raised) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--shadow-inset), var(--glow-shadow-deep) }
  [data-theme="glow"] .menu :is([role="menuitem"], [role="menuitemradio"]) { border-radius: 14px }
  [data-theme="glow"] .menu :is([role="menuitem"], [role="menuitemradio"]):is(:hover, :focus-visible) { background: var(--glow-surface-3) }
  [data-theme="glow"] .theme-swatch { border-radius: 16px }
  [data-theme="glow"] .theme-swatch[aria-checked="true"] { background: var(--glow-surface-3); box-shadow: 0 0 0 1px var(--color-brand), 0 0 22px -6px var(--glow-teal) }
  [data-theme="glow"] :is(.modal, .drawer, .sheet) { border-width: var(--border-width-hairline); border-color: var(--color-border-subtle); background: var(--color-surface); box-shadow: var(--shadow-inset), var(--glow-shadow-deep), 0 0 90px -30px var(--glow-teal) }
  [data-theme="glow"] .modal { --enter: translate3d(0, 16px, 0) scale(0.96); border-radius: 28px }
  [data-theme="glow"] .sheet { border-radius: 28px 28px 0 0 }
  [data-theme="glow"] .drawer { background: color-mix(in srgb, var(--color-surface) 90%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px) }
  [data-theme="glow"] dialog:is(.modal, .drawer, .sheet)::backdrop { background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--glow-aurora-teal) 16%, transparent), transparent 72%), var(--color-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
  [data-theme="glow"] .drawer-nav a { border-radius: var(--radius-pill) }
  [data-theme="glow"] .drawer-nav a[aria-current] { background: var(--glow-surface-3) }
  [data-theme="glow"] .toast { border-color: var(--color-border-subtle); background: color-mix(in srgb, var(--color-raised) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow-inset), var(--glow-shadow-deep) }
  [data-theme="glow"] :is(.toast, .callout) > .i { filter: drop-shadow(0 0 6px currentColor) }
  [data-theme="glow"] .seg { padding: 4px; border-color: var(--color-border-subtle); border-radius: var(--radius-pill) }
  [data-theme="glow"] .seg > button { border-radius: var(--radius-pill) }
  [data-theme="glow"] .seg > :is([aria-checked="true"], [aria-pressed="true"]) { background: var(--glow-surface-3); box-shadow: var(--shadow-inset), var(--shadow-1), 0 0 0 1px var(--color-border) }
  [data-theme="glow"] .chip:is([aria-pressed="true"], [aria-checked="true"], .is-selected) { background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface)); box-shadow: 0 0 18px -6px var(--glow-teal) }
  [data-theme="glow"] .btn-group { border-radius: var(--radius-pill) }
  [data-theme="glow"] .btn-group > .btn { border-radius: 0 }
  [data-theme="glow"] .btn-group > .btn:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit }
  [data-theme="glow"] .btn-group > .btn:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit }
  [data-theme="glow"] .btn.fab { box-shadow: var(--shadow-inset), var(--glow-shadow-deep), var(--shadow-glow) }
  [data-theme="glow"] .tabs:not(.is-pill) { gap: var(--space-2); box-shadow: inset 0 -1px 0 var(--color-border) }
  [data-theme="glow"] .tabs:not(.is-pill) > [role="tab"] { padding-inline: var(--space-3); border: 0; background: none }
  [data-theme="glow"] .tabs:not(.is-pill) > [role="tab"]::after { content: ""; position: absolute; inset-inline: var(--space-3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--glow-aurora)); box-shadow: var(--shadow-glow); opacity: 0; transform: scaleX(0.4); transition: opacity var(--motion-duration-fast), transform var(--motion-duration-slow) var(--motion-ease-out) }
  [data-theme="glow"] .tabs:not(.is-pill) > [role="tab"][aria-selected="true"]::after { opacity: 1; transform: none }
  [data-theme="glow"] .tabs.is-pill { border-color: var(--color-border-subtle) }
  [data-theme="glow"] .tabs.is-pill > [role="tab"][aria-selected="true"] { box-shadow: var(--shadow-glow); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 60%) }
  [data-theme="glow"] .pager :is(a, button, .pager-gap) { border-radius: var(--radius-pill) }
  [data-theme="glow"] .pager [aria-current="page"] { box-shadow: var(--shadow-glow); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), transparent 60%) }
  [data-theme="glow"] .crumbs li + li::before { width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--color-border-strong); transform: none }
  [data-theme="glow"] .subnav { background: var(--glow-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }
  [data-theme="glow"] .subnav a:is([aria-current], .is-active) { background: var(--glow-surface-3) }
  [data-theme="glow"] .badge:is([data-tone], [data-status]) { background: var(--tone-soft); color: var(--tone) }
  [data-theme="glow"] .status-dot { box-shadow: 0 0 10px var(--tone, transparent) }
  [data-theme="glow"] .range input[type="range"]::-webkit-slider-thumb { border-color: var(--color-brand); background: var(--color-text); box-shadow: var(--shadow-glow) }
  [data-theme="glow"] .range input[type="range"]::-moz-range-thumb { background: var(--color-text) }
  [data-theme="glow"] .progress > span { background: linear-gradient(90deg, var(--glow-aurora)) }
  [data-theme="glow"] .dropzone { border-radius: 24px; background: var(--color-sunken) }
  [data-theme="glow"] .dropzone-icon { color: var(--glow-aurora-teal) }
  [data-theme="glow"] .dropzone.is-over { box-shadow: var(--shadow-glow) }
  [data-theme="glow"] :is(.card.is-interactive, .card.tpl-card, .card.price-card)::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-teal), transparent); opacity: 0; transform: translate3d(var(--gx, 50%), var(--gy, 50%), 0); transition: opacity var(--motion-duration-slow) var(--motion-ease-standard); pointer-events: none }
  [data-theme="glow"] :is(.card.is-interactive, .card.tpl-card, .card.price-card):hover::before { opacity: 0.5 }
  [data-theme="glow"] .card.is-interactive { transition: transform var(--motion-duration-slow) var(--motion-ease-out) }
  [data-theme="glow"] .card.card.is-interactive:hover { transform: translateY(-3px); border-color: var(--color-border) }
  [data-theme="glow"] .card.card.sponsored { border-color: var(--color-border-strong) }
  [data-theme="glow"] .stat-value, [data-theme="glow"] .price-value { font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 0 }
  [data-theme="glow"] .how > li { border-radius: 20px; background: var(--color-sunken) }
  [data-theme="glow"] .how > li::before { background: linear-gradient(135deg, var(--glow-aurora)); box-shadow: var(--shadow-glow); font-style: italic; font-weight: 600 }
  [data-theme="glow"] .feat-item > .i, [data-theme="glow"] .price-features li:not(.is-off) .i, [data-theme="glow"] .trust .i { color: var(--glow-aurora-teal) }
  [data-theme="glow"] :is(.prose blockquote, .quote) { border-inline-start-color: transparent; border-image: linear-gradient(var(--glow-aurora)) 1; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1 }
  [data-theme="glow"] .prose li::marker { color: var(--glow-aurora-teal) }
  [data-theme="glow"] .callout { border-radius: 18px }
  [data-theme="glow"] .table-wrap, [data-theme="glow"] .list.is-boxed, [data-theme="glow"] .code-block { border-width: var(--border-width-hairline); border-color: var(--color-border-subtle) }
  [data-theme="glow"] .card.card.price-card.is-featured { padding-top: var(--space-7); border: 2px solid transparent; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, linear-gradient(140deg, var(--glow-aurora)) border-box; box-shadow: var(--shadow-3), var(--shadow-glow) }
  [data-theme="glow"] .price-ribbon { top: var(--space-3); translate: -50% 0; background: linear-gradient(110deg, var(--glow-aurora)); box-shadow: var(--shadow-glow) }
  [data-theme="glow"] .cta-band { border-width: var(--border-width-hairline); border-color: var(--color-border-subtle); background: var(--color-surface) }
  [data-theme="glow"] .cta-band::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(closest-side at 30% 40%, var(--glow-teal), transparent), radial-gradient(closest-side at 72% 62%, var(--glow-lime), transparent 80%); opacity: 0.75; animation: cs-glow-drift var(--glow-duration-ambient) var(--glow-ease-drift) infinite alternate; pointer-events: none }
  [data-theme="glow"] .cta-band.is-paused::before { animation-play-state: paused }
  [data-theme="glow"] .cta-band h2 em { padding-right: 0.06em; font-style: italic; background: linear-gradient(110deg, var(--glow-aurora)); -webkit-background-clip: text; background-clip: text; color: transparent }
  [data-theme="glow"] .tpl-thumb { background: radial-gradient(closest-side, var(--glow-teal), transparent 78%), var(--color-sunken) }
  [data-theme="glow"] .tpl-wheel { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 5px var(--color-border), 0 12px 30px -10px var(--glow-teal) }
  [data-theme="glow"] .tpl-wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 50% at 32% 24%, rgb(255 255 255 / 0.32), transparent 70%) }
  [data-theme="glow"] .tpl-wheel::before { border-top-color: var(--glow-aurora-amber); filter: drop-shadow(0 0 4px var(--glow-amber)) }
  [data-theme="glow"] .e-row { border-radius: 16px }
  [data-theme="glow"] .e-emoji { border-radius: 12px }
  [data-theme="glow"] .hist-item.is-latest { background: var(--glow-surface-3) }
  [data-theme="glow"] .digits { font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0 }
  [data-theme="glow"][data-mode="dark"] .digits { text-shadow: 0 0 48px var(--glow-teal) }
  [data-theme="glow"] .bingo-card { border-width: var(--border-width-hairline); border-color: var(--color-border-subtle); box-shadow: var(--shadow-inset), var(--glow-shadow-deep) }
  [data-theme="glow"] .bingo-letter { background: linear-gradient(110deg, var(--glow-aurora)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic }
  [data-theme="glow"] .bingo-cell { border-radius: 12px }
  [data-theme="glow"] .bingo-cell.is-free { background: linear-gradient(140deg, var(--glow-aurora)); color: var(--color-text-on-brand); font-family: var(--font-display); font-style: italic; text-transform: none }
  [data-theme="glow"] .bingo-cell:is(.is-marked, [aria-pressed="true"])::after { border-color: var(--glow-aurora-lime); background: color-mix(in srgb, var(--glow-aurora-lime) 14%, transparent); box-shadow: 0 0 12px var(--glow-lime) }
  [data-theme="glow"] .team-card { border-width: var(--border-width-hairline); border-color: var(--color-border-subtle); border-block-start: 3px solid var(--team, var(--color-palette-1)); box-shadow: var(--shadow-1), 0 -12px 30px -20px var(--team, transparent) }
  [data-theme="glow"] .team-members li::before { box-shadow: 0 0 8px var(--team, transparent) }
  [data-theme="glow"] .present-bar { border: var(--border-width-hairline) solid var(--color-border); background: color-mix(in srgb, var(--color-raised) 84%, transparent); color: var(--color-text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
  [data-theme="glow"] .present-bar kbd { border-color: var(--color-border-strong); background: var(--glow-surface-3); color: var(--color-text) }
  [data-theme="glow"] .present-bar .btn.btn { --btn-fg: var(--color-text) }
  [data-theme="glow"] .present-bar .btn.btn:hover { --btn-bg: var(--color-sunken) }
  [data-theme="glow"] .admin-side { background: var(--color-surface) }
  [data-theme="glow"] .admin-nav a { border-radius: var(--radius-pill) }
  [data-theme="glow"] .admin-nav a[aria-current] { background: var(--glow-surface-3) }
  /* No accent stripes in Night Glow (owner, 2026-10-29): selected rows, callouts and quotes keep their tint and hairline only. */
  [data-theme="glow"] .table tr:is(.is-selected, [aria-selected="true"]) > :first-child { box-shadow: none }
  [data-theme="glow"] .callout { border-inline-start-width: var(--border-width-hairline) }
  [data-theme="glow"] :is(.prose blockquote, .quote) { padding-inline-start: 0; border-inline-start: 0 }
  [data-theme="glow"] .bulk-bar, [data-theme="glow"] .save-bar { border-radius: var(--radius-pill) }
  [data-theme="glow"] .save-bar { background: var(--glow-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
  [data-theme="glow"] .chart-bar-fill { background: linear-gradient(180deg, var(--glow-aurora-teal), var(--color-brand)) }
  [data-theme="glow"] .wheel-readout { background: var(--glow-glass, var(--color-raised)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: color-mix(in srgb, var(--color-text) 18%, transparent) }
  [data-theme="glow"] .wheel-readout.is-winner { border-color: var(--glow-lime, var(--color-brand)); box-shadow: var(--glow-shadow-lime, var(--shadow-3)) }
}