/*
 * Shared UI styling for pageonaut tools
 * Use `.tool-surface` on the main tool container to opt-in.
 * Provides consistent inputs, buttons, checkboxes, radios across light/dark mode.
 */
@import url("/fonts/fontawesome/css/all.min.css");

.tool-surface {
  --tool-surface: var(--elev);
  --tool-surface-strong: var(--card);
  --tool-border-soft: rgba(148, 163, 184, 0.45);
  --tool-border-strong: rgba(148, 163, 184, 0.9);
  --tool-control-bg: rgba(15, 23, 42, 0.02);
  --tool-control-hover: rgba(56, 189, 248, 0.08);
  --tool-control-focus: rgba(56, 189, 248, 1);
  --tool-control-size: 1.38rem;
  --tool-control-radius: 0.42rem;
  --tool-icon-size: 0.7rem;
  --tool-checkmark: #0b1020;
  --tool-chip-bg: var(--tool-control-bg);
  --tool-chip-hover: linear-gradient(145deg, rgba(56, 189, 248, 0.07), rgba(59, 130, 246, 0.05));
  --tool-chip-border: var(--tool-border-soft);
  --tool-chip-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
  --tool-chip-active-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.85),
    0 16px 34px rgba(15, 23, 42, 0.45);
  --tool-shadow-soft: var(--shadow-soft, 0 10px 30px rgba(15, 23, 42, 0.16));
  --tool-radius: 14px;
}

html[data-theme="dark"] .tool-surface {
  --tool-surface: rgba(15, 23, 42, 0.92);
  --tool-surface-strong: rgba(17, 24, 39, 0.95);
  --tool-border-soft: rgba(100, 116, 139, 0.55);
  --tool-border-strong: rgba(148, 163, 184, 0.8);
  --tool-control-bg: rgba(255, 255, 255, 0.04);
  --tool-control-hover: rgba(56, 189, 248, 0.16);
  --tool-chip-bg: color-mix(in oklab, var(--card) 90%, transparent);
  --tool-chip-hover: linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(59, 130, 246, 0.12));
  --tool-chip-border: rgba(148, 163, 184, 0.65);
  --tool-chip-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  --tool-chip-active-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.9),
    0 18px 36px rgba(0, 0, 0, 0.62);
  --tool-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.55);
  --tool-checkmark: #010a18;
}

/* Base inputs */
.tool-surface input[type="text"],
.tool-surface input[type="number"],
.tool-surface input[type="file"],
.tool-surface select,
.tool-surface textarea {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid var(--tool-border-strong);
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--tool-control-bg);
  color: var(--fg);
  transition:
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background-color 0.15s ease-out;
}

.tool-surface textarea {
  min-height: 100px;
  resize: vertical;
}

.tool-surface input[type="text"]:hover,
.tool-surface input[type="number"]:hover,
.tool-surface input[type="file"]:hover,
.tool-surface select:hover,
.tool-surface textarea:hover {
  border-color: var(--tool-control-focus);
  background: var(--tool-control-hover);
}

.tool-surface input[type="text"]:focus-visible,
.tool-surface input[type="number"]:focus-visible,
.tool-surface input[type="file"]:focus-visible,
.tool-surface select:focus-visible,
.tool-surface textarea:focus-visible {
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
  border-color: var(--tool-control-focus);
  background: var(--tool-control-bg);
}

/* Simple buttons for steppers or small actions */
.tool-surface .tool-pill-button {
  border-radius: 999px;
  border: 1px solid var(--tool-border-strong);
  background: var(--tool-control-bg);
  color: var(--fg);
  padding: 0.45rem 0.9rem;
  font: inherit;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out,
    transform 0.08s ease-out,
    box-shadow 0.15s ease-out;
}

.tool-surface .tool-pill-button:hover {
  background: var(--tool-control-hover);
  border-color: var(--tool-control-focus);
  box-shadow: var(--tool-shadow-soft);
  transform: translateY(-1px);
}

.tool-surface .tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.98rem;
  border-radius: 999px;
  border: 1px solid var(--tool-chip-border);
  background: var(--tool-chip-bg);
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.16s ease-out,
    border-color 0.16s ease-out,
    transform 0.08s ease-out,
    box-shadow 0.16s ease-out;
}

.tool-surface .tool-chip:hover {
  background: var(--tool-chip-hover);
  border-color: var(--tool-control-focus);
  box-shadow: var(--tool-chip-shadow);
  transform: translateY(-1px);
}

.tool-surface .tool-chip:focus-visible {
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
}

.tool-surface .tool-chip.is-active,
.tool-surface .tool-chip[aria-pressed="true"],
.tool-surface .tool-chip:has(input:checked) {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 60%),
    var(--tool-surface);
  border-color: var(--tool-control-focus);
  box-shadow: var(--tool-chip-active-shadow);
  transform: translateY(-1px);
}

/* Checkboxes */
.tool-surface input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--tool-control-size);
  height: var(--tool-control-size);
  border-radius: var(--tool-control-radius);
  border: 1.5px solid var(--tool-border-strong);
  background: var(--tool-control-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.08s ease-out;
}

.tool-surface input[type="checkbox"]:hover {
  border-color: var(--tool-control-focus);
  background: var(--tool-control-hover);
  transform: translateY(-0.5px);
}

.tool-surface input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
}

.tool-surface input[type="checkbox"]::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: calc(var(--tool-icon-size) * 1.25);
  line-height: 1;
  color: currentColor;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.12s ease-out,
    transform 0.12s ease-out;
}

.tool-surface input[type="checkbox"]:checked {
  background: var(--brand2);
  border-color: var(--tool-control-focus);
  box-shadow:
    0 0 0 1px var(--tool-control-focus),
    0 10px 18px rgba(15, 23, 42, 0.25);
  color: var(--tool-checkmark);
}

.tool-surface input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

/* Radios */
.tool-surface input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: calc(var(--tool-control-size) - 0.1rem);
  height: calc(var(--tool-control-size) - 0.1rem);
  border-radius: 999px;
  border: 1.5px solid var(--tool-border-strong);
  background: var(--tool-control-bg);
  position: relative;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.08s ease-out;
}

.tool-surface input[type="radio"]:hover {
  border-color: var(--tool-control-focus);
  background: var(--tool-control-hover);
}

.tool-surface input[type="radio"]:focus-visible {
  outline: 2px solid var(--tool-control-focus);
  outline-offset: 2px;
}

.tool-surface input[type="radio"]:checked {
  border-color: var(--tool-control-focus);
  background: var(--tool-control-bg);
  box-shadow:
    0 0 0 1px var(--tool-control-focus),
    0 10px 18px rgba(15, 23, 42, 0.25);
}

.tool-surface input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: var(--brand2);
}

/* Label helpers */
.tool-surface .tool-field-label {
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.tool-surface .tool-field-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Card shells for inputs / previews */
.tool-surface .tool-surface-card {
  background: var(--tool-surface);
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  box-shadow: var(--tool-shadow-soft);
}