/*
 * Hand-written CSS on top of app.css (the design system).
 * Edit freely - no build step needed. Colors come from the theme tokens in
 * app.css, e.g. var(--primary), var(--border), var(--card).
 */

/* Native <dialog> used for search / suggest / tool dialogs */
dialog.t4-dialog {
  position: fixed;
  margin: auto;
  max-height: calc(100vh - 2rem);
  inset-inline: 0;
}
dialog.t4-dialog[open] {
  animation: t4-zoom-in 160ms ease-out;
}
dialog.t4-dialog.top-\[12\%\] {
  margin-top: 12vh;
}
dialog.t4-dialog::backdrop {
  background: rgb(0 0 0 / 0.8);
  animation: t4-fade-in 160ms ease-out;
}
@keyframes t4-fade-in {
  from { opacity: 0; }
}
@keyframes t4-zoom-in {
  from { opacity: 0; transform: scale(0.96); }
}

/* Accordion built on <details>/<summary> */
details.t4-accordion > summary {
  list-style: none;
}
details.t4-accordion > summary::-webkit-details-marker {
  display: none;
}
details.t4-accordion[open] > summary > svg {
  transform: rotate(180deg);
}

/* Native form controls themed like the old components */
input[type="range"].t4-range,
input[type="checkbox"].t4-check,
input[type="radio"].t4-check {
  accent-color: var(--primary);
}
input[type="range"].t4-range {
  width: 100%;
  cursor: pointer;
}

/* Toggle switch: <input type="checkbox" class="t4-switch"> */
input.t4-switch {
  appearance: none;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--input);
  cursor: pointer;
  transition: background-color 150ms;
}
input.t4-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--background);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: transform 150ms;
}
input.t4-switch:checked {
  background: var(--primary);
}
input.t4-switch:checked::after {
  transform: translateX(1rem);
}
input.t4-switch:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Native select styled like the old Select trigger */
select.t4-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
  cursor: pointer;
}

[hidden],
[x-cloak] {
  display: none !important;
}

/* Hero search dropdown styling (prevent inheriting light text-ink-foreground from hero section) */
[data-hero-suggestions] {
  color: var(--card-foreground);
  background-color: var(--card);
}
[data-hero-suggestions] a {
  color: var(--card-foreground);
}
[data-hero-suggestions] strong {
  color: var(--foreground);
}