/*
 * Crusher UI Kit static tool shell
 * Small utility layer for no-build/static tools. It intentionally uses
 * domain-neutral class names so consumer sites can adopt the shell without
 * inheriting Hassaan/Crusher-specific layout decisions.
 */

:root {
  --crusher-tool-shell-max-width: 76rem;
  --crusher-tool-shell-padding: clamp(var(--crusher-spacing-4), 4vw, var(--crusher-spacing-8));
  --crusher-tool-shell-gap: var(--crusher-spacing-6);
  --crusher-tool-shell-card-min: 16rem;
  --crusher-style-switcher-top: var(--crusher-spacing-6);
  --crusher-style-switcher-bg: color-mix(in srgb, var(--crusher-background-surface) 94%, transparent);
  --crusher-style-switcher-shadow: var(--crusher-shadow-xl);
  --crusher-style-switcher-icon-shadow: var(--crusher-shadow-md);
  --crusher-style-switcher-color-gap: var(--crusher-spacing-2);
  --crusher-style-switcher-color-justify: flex-start;
}

html[data-mode="dark"] {
  color-scheme: dark;
}

.crusher-tool-page {
  min-block-size: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--crusher-color-brand-primary) 14%, transparent), transparent 28rem),
    var(--crusher-background-canvas);
  color: var(--crusher-text-primary);
}

.crusher-tool-shell {
  width: min(100%, var(--crusher-tool-shell-max-width));
  margin-inline: auto;
  padding: var(--crusher-tool-shell-padding);
}

.crusher-tool-header {
  display: grid;
  gap: var(--crusher-spacing-3);
  margin-block: var(--crusher-spacing-8);
  text-align: center;
}

.crusher-tool-title {
  margin: 0;
  color: var(--crusher-text-primary);
  font-size: clamp(var(--crusher-font-size-3xl), 6vw, var(--crusher-font-size-5xl));
  line-height: var(--crusher-line-height-tight);
}

.crusher-tool-lede {
  max-width: 42rem;
  margin: 0 auto;
  color: var(--crusher-text-secondary);
}

.crusher-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--crusher-tool-shell-card-min)), 1fr));
  gap: var(--crusher-tool-shell-gap);
}

.crusher-tool-surface,
.crusher-tool-card {
  border: var(--crusher-component-border-weight) solid var(--crusher-border-primary);
  border-radius: var(--crusher-radius-xl);
  background: var(--crusher-background-surface);
  box-shadow: var(--crusher-shadow-lg);
}

.crusher-tool-card {
  display: grid;
  gap: var(--crusher-spacing-4);
  padding: var(--crusher-spacing-6);
  color: var(--crusher-text-primary);
  text-decoration: none;
  transition:
    transform var(--crusher-motion-duration-fast) var(--crusher-motion-easing-standard),
    border-color var(--crusher-motion-duration-fast) var(--crusher-motion-easing-standard),
    background-color var(--crusher-motion-duration-fast) var(--crusher-motion-easing-standard);
}

.crusher-tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--crusher-color-brand-primary);
  background: color-mix(in srgb, var(--crusher-color-brand-primary) 8%, var(--crusher-background-surface));
}

.crusher-tool-card p,
.crusher-tool-muted {
  color: var(--crusher-text-secondary);
}

.crusher-tool-control {
  width: 100%;
  border: var(--crusher-component-border-weight) solid var(--crusher-border-primary);
  border-radius: var(--crusher-radius-lg);
  background: var(--crusher-background-muted);
  color: var(--crusher-text-primary);
}

.crusher-tool-control:focus {
  border-color: var(--crusher-color-brand-primary);
  box-shadow: 0 0 0 var(--crusher-focus-width) color-mix(in srgb, var(--crusher-color-brand-primary) 26%, transparent);
  outline: none;
}

.crusher-tool-action {
  border: var(--crusher-component-border-weight) solid color-mix(in srgb, var(--crusher-color-brand-primary) 28%, var(--crusher-border-primary));
  border-radius: var(--crusher-radius-lg);
  background: color-mix(in srgb, var(--crusher-color-brand-primary) 12%, var(--crusher-background-surface));
  color: var(--crusher-text-primary);
  cursor: pointer;
}

.crusher-tool-action:hover {
  border-color: var(--crusher-color-brand-primary);
  background: color-mix(in srgb, var(--crusher-color-brand-primary) 18%, var(--crusher-background-surface));
}

.crusher-tool-action:disabled,
.crusher-tool-action[disabled],
.crusher-tool-action[aria-disabled="true"] {
  opacity: var(--crusher-opacity-disabled, 0.6);
  cursor: not-allowed;
  pointer-events: none;
}

.crusher-tool-action--pill {
  border-radius: var(--crusher-radius-full);
  font-weight: var(--crusher-font-weight-semibold);
  padding-inline: var(--crusher-spacing-6);
  padding-block: var(--crusher-spacing-2);
}

.crusher-tool-control--mono,
.crusher-mono {
  font-family: var(--crusher-font-family-mono);
}

.crusher-tool-stack {
  display: grid;
  gap: var(--crusher-spacing-6);
  max-inline-size: 42rem;
  margin-inline: auto;
}

/*
 * .crusher-tool-fab — floating action button.
 *
 * SVG slotted inside picks up the fab's `color` via `currentColor`.
 * Override per consumer via:
 *   .crusher-tool-fab { color: ... }
 * Or by inlining `fill="white"` on a slotted SVG (overrides currentColor).
 */
.crusher-tool-fab {
  position: fixed;
  inset-inline-end: var(--crusher-spacing-5);
  inset-block-end: var(--crusher-spacing-5);
  z-index: var(--crusher-z-dropdown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--crusher-spacing-14);
  block-size: var(--crusher-spacing-14);
  border-radius: var(--crusher-radius-full);
  background: var(--crusher-color-brand-primary);
  color: var(--crusher-color-base-white);
  box-shadow: var(--crusher-shadow-lg);
  transition:
    transform var(--crusher-motion-duration-fast) var(--crusher-motion-easing-standard),
    background-color var(--crusher-motion-duration-fast) var(--crusher-motion-easing-standard);
}

.crusher-tool-fab:hover {
  transform: translateY(-2px) scale(1.03);
  background: color-mix(in srgb, var(--crusher-color-brand-primary) 82%, black);
}

/* crusher-disclosure — CSS-only utility for plain <details> */
.crusher-disclosure {
  border: var(--crusher-component-border-weight) solid var(--crusher-border-primary);
  border-radius: var(--crusher-radius-md);
  padding: var(--crusher-spacing-3) var(--crusher-spacing-4);
  overflow: hidden;
}

.crusher-disclosure > summary {
  cursor: pointer;
  font-weight: var(--crusher-font-weight-semibold);
  list-style: none;
  padding-block: var(--crusher-spacing-1);
  -webkit-user-select: none;
  user-select: none;
}

.crusher-disclosure > summary::-webkit-details-marker { display: none; }
.crusher-disclosure > summary::marker { display: none; }

.crusher-disclosure > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-inline-end: var(--crusher-spacing-2);
  transition: transform var(--crusher-motion-duration-fast, 120ms) var(--crusher-motion-easing-standard, ease);
}

.crusher-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .crusher-disclosure > summary::before { transition: none; }
}