/*
 * Beautiful UI static adapter, derived from the MIT-licensed components at
 * https://github.com/slev12397/beautiful-ui
 * Pinned source: 44a274e598395ab61e7c96c26fda2758780253b7.
 * Original source and full license: ./vendor/beautiful-ui/.
 *
 * Button, StatusPill, SegmentedControl and CodeBlock styles are translated from
 * their upstream Tailwind utilities into scoped CSS. The existing content and
 * accessible interactions remain in the landing page. Surface and typography
 * tokens are mapped to LagrangeCloud's light-theme tokens and local Geist fonts.
 */

[data-bui-component] {
  --bui-surface: var(--surface, #fff);
  --bui-canvas: var(--page, #fff);
  --bui-inset: var(--surface-2, oklch(0.979 0.002 247.839));
  --bui-hover: var(--surface-2, oklch(0.97 0.002 247.839));
  --bui-hover-2: var(--surface-3, oklch(0.933 0.003 247.86));
  --bui-ink: var(--fg, oklch(0.247 0.006 258.361));
  --bui-ink-2: var(--fg-2, oklch(0.506 0.01 264.477));
  --bui-ink-3: var(--fg-3, oklch(0.695 0.009 264.505));
  --bui-line: var(--border, oklch(0.946 0.003 264.542));
  --bui-line-strong: var(--border-strong, oklch(0.912 0.005 258.326));
  --bui-accent: var(--accent, oklch(0.626 0.205 254.947));
  --bui-accent-tint: var(--accent-soft, oklch(0.96 0.019 252.878));
  --bui-green: var(--good, oklch(0.603 0.155 150.883));
  --bui-green-tint: var(--good-soft, oklch(0.958 0.017 159.118));
  --bui-orange: var(--warn, oklch(0.689 0.179 49.902));
  --bui-orange-tint: var(--warn-soft, oklch(0.964 0.021 67.581));
  --bui-shadow-hairline: 0 0 0 1px var(--bui-line);
  --bui-shadow-btn: 0 0 0 1px var(--bui-line-strong), 0 1px 2px rgb(14 22 38 / 4%);
  --bui-shadow-card: 0 0 0 1px var(--bui-line), 0 1px 2px rgb(14 22 38 / 3%), 0 4px 12px rgb(14 22 38 / 3%);
  --bui-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Button.tsx: core button style, secondary/primary/quiet variants. */
[data-bui-component="Button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--bui-control-radius, 999px);
  background: var(--bui-surface);
  color: var(--bui-ink);
  box-shadow: var(--bui-shadow-btn);
  font-family: var(--font-ui, "Geist", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  user-select: none;
  transition: transform 150ms ease-out, background-color 150ms ease-out, opacity 150ms ease-out;
}
[data-bui-component="Button"]:hover {
  background: var(--bui-inset);
  text-decoration: none;
}
[data-bui-component="Button"]:active { transform: scale(0.96); }
[data-bui-component="Button"]:disabled,
[data-bui-component="Button"][aria-disabled="true"] { opacity: .5; pointer-events: none; }
[data-bui-component="Button"][data-bui-variant="primary"] {
  background: var(--bui-ink);
  color: var(--bui-canvas);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
}
[data-bui-component="Button"][data-bui-variant="primary"]:hover { opacity: .9; }
[data-bui-component="Button"][data-bui-variant="quiet"] { background: transparent; box-shadow: none; }
[data-bui-component="Button"][data-bui-variant="quiet"]:hover { background: var(--bui-hover); }

/* StatusPill.tsx: semantic color stays restricted to existing demo statuses. */
[data-bui-component="StatusPill"] {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--bui-inset);
  color: var(--bui-ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
[data-bui-component="StatusPill"][data-bui-tone="green"] { background: var(--bui-green-tint); color: var(--bui-green); }
[data-bui-component="StatusPill"][data-bui-tone="orange"] { background: var(--bui-orange-tint); color: var(--bui-orange); }
[data-bui-component="StatusPill"][data-bui-tone="accent"] { background: var(--bui-accent-tint); color: var(--bui-accent); }

/* SegmentedControl.tsx: the upstream equal-width track and sliding thumb. */
[data-bui-component="SegmentedControl"] {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(var(--bui-segment-count, 3), minmax(0, 1fr));
  height: var(--bui-segment-height, 40px);
  align-items: stretch;
  gap: 0;
  padding: 2px;
  border: 0;
  border-radius: var(--bui-control-radius, 999px);
  background: color-mix(in srgb, var(--bui-line) 60%, transparent);
  user-select: none;
}
[data-bui-component="SegmentedControl"] > .bui-segment-thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--bui-segment-count, 3));
  border-radius: inherit;
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-hairline);
  transform: translateX(calc(var(--bui-segment-index, 0) * 100%));
  transition: transform 200ms var(--bui-ease);
  pointer-events: none;
}
[data-bui-component="SegmentedControl"] > [role="tab"] {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--bui-ink-3);
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: color 150ms ease;
}
[data-bui-component="SegmentedControl"] > [role="tab"]:hover { color: var(--bui-ink-2); }
[data-bui-component="SegmentedControl"] > [role="tab"][aria-selected="true"] { background: transparent; color: var(--bui-ink); box-shadow: none; }

/* CodeBlock.tsx: light editor shell, hairline shadow and wrapping code body.
 * Existing install labels replace the source's demo header, preserving copy. */
[data-bui-component="CodeBlock"] {
  overflow: hidden;
  border: 0;
  border-radius: var(--bui-window-radius, 14px);
  background: var(--bui-surface);
  box-shadow: var(--bui-shadow-card);
}
[data-bui-component="CodeBlock"] > [role="tabpanel"] {
  position: relative;
  padding: 12px;
  background: var(--bui-surface);
  color: var(--bui-ink-2);
}
[data-bui-component="CodeBlock"] > [role="tabpanel"] pre {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-bui-component="CodeBlock"] .copy {
  color: var(--bui-ink-3);
  transition: color 100ms ease, background-color 100ms ease;
}
[data-bui-component="CodeBlock"] .copy:hover { background: var(--bui-hover); color: var(--bui-ink); }
[data-bui-component="CodeBlock"] .copy[data-state="copied"] { color: var(--bui-green); }

@media (prefers-reduced-motion: reduce) {
  [data-bui-component="Button"],
  [data-bui-component="SegmentedControl"] > .bui-segment-thumb,
  [data-bui-component="SegmentedControl"] > [role="tab"] { transition: none; }
}