/* Glass / Sunset presentation primitives. Load tokens.css and submenu.css first.
   These classes style content only; they do not create product state or actions. */
.component-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.component-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.component-title :is(h2,h3,h4) { margin: 0; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; }
.component-title-row > :is(button,a,.component-actions) { flex: 0 0 auto; margin-left: auto; }
.component-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.component-glyph { display: grid; place-items: center; flex: 0 0 24px; }
.component-glyph svg { display: block; width: 24px; height: 24px; }
.component-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass-face), var(--glass-fill); box-shadow: var(--glass-bevel), var(--glass-shadow); color: inherit; }
.component-card::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--glass-rim); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.component-card > p { margin: 20px 0; max-width: 65ch; font-size: 14px; line-height: 1.65; }
.component-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 11px; color: color-mix(in srgb,currentColor 70%,transparent); }
.component-card:not([data-state="selected"]) [data-accent] { fill: currentColor; fill-opacity: .2; }
.component-card:not([data-state="selected"]) [data-accent-stroke] { stroke: currentColor; }
.component-card[data-state="selected"], .component-pill[data-state="selected"], .component-toggle[aria-pressed="true"] { border-color: transparent; }
:is(.component-card,.component-pill)[data-state="selected"]::after, .component-toggle[aria-pressed="true"]::after { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--signature-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.component-card[data-state="waypoint"]::after { content: ""; position: absolute; top: -1px; left: 20px; width: 104px; height: 1px; background: linear-gradient(90deg,transparent,var(--waypoint-color),transparent); }
.component-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; border: 1px solid var(--submenu-edge); border-radius: 999px; background: var(--glass-face), var(--submenu-fill); box-shadow: var(--glass-bevel); color: inherit; font: 500 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space: nowrap; }
.component-pill[data-state="waypoint"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--waypoint-color); }
.component-pill[data-state="review"] { border-style: dashed; }
.component-pill[data-state="muted"] { border-color: transparent; background: transparent; box-shadow: none; color: color-mix(in srgb,currentColor 68%,transparent); }
.component-toggle { position: relative; }
.component-toggle[aria-pressed="true"] { background: var(--glass-face), var(--submenu-hover-fill); }
@media (max-width: 480px) { .component-card { padding: 16px; } .component-title-row { gap: 10px; } .component-title { gap: 8px; } }