/* Public Contour + Dot Matrix recipes. Kept inside the isolated website build.
   site.css owns marketing composition; these shared recipes own its UI skin. */
body {
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 18%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--bg);
}
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: var(--sl-space-1);
}
:is(.text-link, .sign-in, .section-link a) { color: var(--brand-accent-text); }
:is(.text-link, .sign-in, .site-footer a):hover { text-decoration: underline; text-underline-offset: .2em; }
.eyebrow, .roadmap-scenario small, .streamers > small, .chat-label, .guide-entry small, .workspace-top > span {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .08em;
}
/* Keep generous marketing sections; use the accepted compact page edges. */
main > section, .site-footer { padding-inline: var(--sl-page-gutter); }
.site-header { background: color-mix(in srgb, var(--bg) 96%, transparent); }
.brand img { padding: var(--sl-space-1); border-radius: var(--sl-button-radius); background: var(--panel); }
.cta-row { flex-wrap: wrap; }

/* One card frame for information, examples and nested content. */
:where(.composition, .card, .action-panel, .tool-card, .guide-entry, .command-form, .raid-card, .metrics > div, .observation, .settings-detail, .pricing-card, .pricing-comparison details, .legal-document, .standalone-tools) {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--sl-radius);
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 4px 0 0 var(--surface-edge), 0 6px 0 color-mix(in srgb, var(--brand-accent) 18%, var(--bg));
  overflow-wrap: anywhere;
}
:is(.tool-card, .guide-entry, .metrics > div, .observation) { background: var(--panel-2); }
.card-grid, .pricing-grid, .creator-grid, .roadmap-teaser-grid { gap: var(--sl-space-5); }
.tool-card { margin-block: var(--sl-space-3); }

/* The same compact control recipe across navigation, forms and live examples. */
:where(button, .button, .ui-button, .tool-tabs > span, .roadmap-jump a) {
  min-height: var(--sl-button-height);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-2);
  padding: var(--sl-space-1) var(--sl-space-4);
  border: 1px solid var(--line);
  border-radius: var(--sl-button-radius);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: var(--control-shadow);
  line-height: 1.4;
  font-weight: 650;
  text-align: center;
  overflow-wrap: anywhere;
}
:is(.nav-cta .button, .demo-switch button, .raid-switch button, .team-switch button) { padding: var(--sl-space-1) var(--sl-space-3); min-height: var(--sl-button-height); }
:is(.primary, .ui-button, .skip-link) { background: var(--brand-accent-surface); border-color: var(--brand-accent-border); color: var(--brand-accent-text); }
:is(button, .button, .roadmap-jump a):hover { border-color: var(--brand-accent); background: var(--brand-accent-soft); }
:is(button, .button):active { box-shadow: none; }
button:disabled { opacity: .6; cursor: not-allowed; }
:is(.selected, .streamer.active, .team-switch .selected) { border-color: var(--brand-accent-border) !important; background: var(--brand-accent-surface) !important; color: var(--brand-accent-text) !important; }
.mobile-toggle { width: var(--sl-button-height); padding: var(--sl-space-1); display: none; }
.site-icon { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-tabs { gap: var(--sl-space-1); }
.tool-tabs > span { flex: 1 1 0; min-width: 0; padding-inline: var(--sl-space-1); gap: var(--sl-space-1); white-space: nowrap; }
.tool-tabs > span:first-child { --brand-accent-text: var(--platform-youtube); color: var(--platform-youtube); }

/* Each field has one shared frame, including keyboard focus. */
input:not([type=checkbox]), select, textarea {
  min-width: 0;
  min-height: var(--sl-control-height);
  padding: var(--sl-space-2) var(--sl-space-4);
  border: 1px solid var(--line);
  border-radius: var(--sl-button-radius);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
input[type=checkbox] { accent-color: var(--brand-accent); }
.pill, .roadmap-status, .feature-status { border-radius: var(--sl-button-radius); }
.twitch { color: var(--platform-twitch) !important; }
[data-platform=Twitch].selected { --brand-accent-border: var(--platform-twitch); --brand-accent-surface: color-mix(in srgb, var(--platform-twitch) 18%, var(--panel)); --brand-accent-text: var(--platform-twitch); }
[data-platform=Kick].selected { --brand-accent-border: var(--platform-kick); --brand-accent-surface: color-mix(in srgb, var(--platform-kick) 12%, var(--panel)); --brand-accent-text: var(--platform-kick); }
[data-platform=YouTube].selected { --brand-accent-border: var(--platform-youtube); --brand-accent-surface: color-mix(in srgb, var(--platform-youtube) 18%, var(--panel)); --brand-accent-text: var(--platform-youtube); }

/* Swordline Plus is silver; Creator Plus remains gold. */
:is(.team-demo, .pricing-card.workflow) {
  --brand-accent: var(--plus-ink);
  --brand-accent-text: var(--plus-ink);
  --brand-accent-surface: var(--plus-surface);
  --brand-accent-soft: var(--plus-surface);
  --brand-accent-border: var(--plus-border);
  --surface-edge: var(--plus-border);
  --brand-focus-ring: var(--plus-ink);
  border-color: var(--plus-border);
}
.orange-section > .section-heading .eyebrow, .team-demo .orange, .pricing-card.workflow :is(.eyebrow, .pricing-note, .pricing-flag) { color: var(--plus-ink) !important; }
.team-symbol { background: var(--plus-surface); border-color: var(--plus-border); color: var(--plus-ink); border-radius: var(--sl-button-radius); }
.pricing-card.creator_intelligence { --surface-edge: var(--creator-border); border-color: var(--creator-border); }
.gold-button { background: var(--creator-surface); border-color: var(--creator-border); color: var(--gold); }
.pricing-card.creator_intelligence .eyebrow { color: var(--gold); }
.pricing-flag { top: calc(-1 * var(--sl-space-3)); right: var(--sl-space-5); padding: var(--sl-space-1) var(--sl-space-2); border: 1px solid var(--plus-border); border-radius: var(--sl-button-radius); background: var(--panel); }

/* Workspace illustrations follow the actual neutral, compact chat design. */
.streamers, .tools, .workspace-top, .chat > header, .chat-label { background: var(--panel); }
.streamer { border: 1px solid var(--line); border-radius: var(--sl-button-radius); background: var(--panel-2); box-shadow: var(--control-shadow); }
.chat-filter, .chat-input { border-radius: var(--sl-button-radius); background: var(--bg); }
.chat-message { margin: var(--sl-space-1); padding: var(--sl-space-2) var(--sl-space-3); border: 1px solid var(--line); border-radius: var(--sl-radius); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.chat-message:nth-of-type(even) { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.highlight { border-color: var(--brand-accent-border); }
.avatar { border-radius: var(--sl-button-radius); }
.workspace .chat { background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 18%, transparent) 1px, transparent 1.5px) 0 0 / 24px 24px; }
.mega-menu { border-radius: var(--sl-radius); border-color: var(--line); background: var(--panel); padding: var(--sl-space-3); }
.mega-menu a { border-radius: var(--sl-button-radius); }
.mega-menu a:hover { background: var(--brand-accent-soft); }
.final-cta { background: radial-gradient(ellipse at 50% 100%, var(--brand-accent-soft), transparent 65%); }
@media (max-width: 850px) { .mobile-toggle { display: inline-flex; } }
@media (max-width: 580px) {
  .chat-message { padding: var(--sl-space-2) var(--sl-space-3) !important; }
  .cta-row { flex-direction: column; gap: var(--sl-space-4); }
  .nav-cta .button { font-size: 11px; padding-inline: var(--sl-space-2); }
  .team-switch button { padding-inline: var(--sl-space-1); }
  .platforms { flex-wrap: wrap; gap: var(--sl-space-3); }
  .site-header { gap: var(--sl-space-2); }
}