/* FeedbackLoop - small polish layer on top of Tailwind CDN */

/* Ensure pre-wrap content respects container width */
.whitespace-pre-wrap {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Smooth checkbox interactions */
input[type="checkbox"] {
  accent-color: var(--text-main);
  cursor: pointer;
}

:root {
  color-scheme: light;
  --page: #f7f7f5;
  --nav: rgba(251, 251, 250, 0.94);
  --surface: #ffffff;
  --surface-muted: #f7f7f5;
  --border-soft: #e7e7e4;
  --text-main: #171717;
  --text-muted: #6b6b66;
  --text-soft: #3f3f3c;
  --button: #171717;
  --button-text: #ffffff;
}

.dark {
  color-scheme: dark;
  --page: #212121;
  --nav: rgba(33, 33, 33, 0.96);
  --surface: #2f2f2f;
  --surface-muted: #262626;
  --border-soft: #3a3a3a;
  --text-main: #f5f5f5;
  --text-muted: #b4b4b0;
  --text-soft: #d6d6d2;
  --button: #f5f5f5;
  --button-text: #171717;
}

body {
  background: var(--page) !important;
  color: var(--text-main) !important;
  transition: background-color 160ms ease, color 160ms ease;
}

nav {
  background: var(--nav) !important;
  border-color: var(--border-soft) !important;
}

footer {
  border-color: var(--border-soft) !important;
}

a {
  color: inherit;
}

.brand-link {
  color: var(--text-main) !important;
}

.brand-logo {
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.7;
}

.coming-soon-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  vertical-align: middle;
}

.beta-panel {
  background: rgba(234, 179, 8, 0.07) !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
  border-radius: 0.5rem;
  color: var(--text-soft) !important;
}

.dark .beta-panel {
  background: rgba(234, 179, 8, 0.08) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

.beta-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.dark .beta-icon-wrap {
  background: rgba(234, 179, 8, 0.12);
  color: #fbbf24;
}

.beta-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: #ca8a04;
  flex-shrink: 0;
  animation: beta-pulse 2.5s ease-in-out infinite;
}

.dark .beta-dot {
  background: #fbbf24;
}

@keyframes beta-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.nav-link {
  color: var(--text-soft) !important;
  transition: color 140ms ease, background-color 140ms ease;
}

.nav-link:hover {
  color: var(--text-main) !important;
}

.nav-link-muted,
.nav-separator {
  color: var(--text-muted) !important;
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface-muted);
  padding: 0.125rem;
}

.segmented-item {
  border-radius: 0.375rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  padding: 0.25rem 0.625rem;
  transition: background-color 140ms ease, color 140ms ease;
}

.segmented-item:hover {
  color: var(--text-main);
}

.segmented-item.is-active {
  background: var(--surface);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .segmented-item.is-active {
  box-shadow: none;
}

.theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  transition: color 140ms ease, background-color 140ms ease;
}

#themeIcon {
  transition: opacity 120ms ease, transform 120ms ease;
}

.theme-button:hover {
  background: var(--surface-muted);
  color: var(--text-main);
}

.app-title,
.text-main {
  color: var(--text-main) !important;
}

.app-muted {
  color: var(--text-muted) !important;
}

.form-label,
.strong-text {
  color: var(--text-soft) !important;
}

.section-divider {
  border-color: var(--border-soft) !important;
}

.panel {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.muted-panel {
  background-color: var(--surface-muted) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.5rem;
}

.nested-panel,
.notice-panel {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.5rem;
  color: var(--text-soft) !important;
}

.notice-panel strong,
.nested-panel strong {
  color: var(--text-main) !important;
}

.step-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.step-badge {
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
}

.status-badge {
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1rem;
  padding: 0.25rem 0.75rem;
}

.status-badge-success {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

.dark .status-badge-success {
  background: rgba(22, 101, 52, 0.25) !important;
  border-color: #166534 !important;
  color: #86efac !important;
}

.choice-row {
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-soft);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.choice-row:hover {
  background: var(--surface-muted);
}

.inline-link {
  color: var(--text-main) !important;
  text-decoration: underline;
  text-decoration-color: var(--border-soft);
  text-underline-offset: 0.18em;
}

.inline-link:hover {
  color: var(--text-soft) !important;
}

.soft-link {
  color: var(--text-muted) !important;
}

.soft-link:hover {
  color: var(--text-main) !important;
}

.quote {
  border-left: 4px solid var(--border-soft);
  color: var(--text-soft);
}

.secondary-button,
.secondary-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.5rem;
  background: var(--surface-muted) !important;
  color: var(--text-soft) !important;
  line-height: 1.25rem;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.secondary-button:hover {
  background: var(--surface) !important;
  color: var(--text-main) !important;
}

.required-mark {
  color: #b42318;
}

.dark .required-mark {
  color: #fca5a5;
}

.field {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-main);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.field:focus {
  outline: none;
  border-color: #9a9a95;
  box-shadow: 0 0 0 2px rgba(154, 154, 149, 0.22);
}

.dark .panel {
  box-shadow: none;
}

html:not(.dark) [class*="dark:bg"],
html:not(.dark) [class*="dark:text"],
html:not(.dark) [class*="dark:border"] {
  /* Tailwind dark variants are inert in light mode; this block exists only to keep
     specificity below the semantic theme classes above. */
}

.dark .bg-white,
.dark [class*="bg-[#fbfbfa]"],
.dark [class*="bg-[#f1f1ee]"],
.dark [class*="bg-[#2a2a2a]"],
.dark [class*="bg-[#2f2f2f]"] {
  background-color: var(--surface) !important;
}

.dark [class*="bg-[#f7f7f5]"],
.dark [class*="bg-[#f2f2ef]"],
.dark [class*="bg-[#eeeeea]"],
.dark [class*="bg-[#262626]"] {
  background-color: var(--surface-muted) !important;
}

.dark [class*="bg-red-"],
.dark [class*="bg-green-"],
.dark [class*="bg-yellow-"],
.dark [class*="bg-amber-"] {
  background-color: var(--surface-muted) !important;
}

.dark [class*="border-[#e7e7e4]"],
.dark [class*="border-[#e5e5e2]"],
.dark [class*="border-[#e1e1dc]"],
.dark [class*="border-[#d7d7d2]"],
.dark [class*="border-[#3a3a3a]"],
.dark [class*="border-[#424242]"],
.dark [class*="border-red-"],
.dark [class*="border-green-"],
.dark [class*="border-yellow-"],
.dark [class*="border-amber-"] {
  border-color: var(--border-soft) !important;
}

.dark .text-neutral-950,
.dark .text-neutral-900,
.dark .text-neutral-800,
.dark .text-neutral-700,
.dark .text-neutral-300,
.dark .text-neutral-200,
.dark .text-white {
  color: var(--text-main) !important;
}

.dark .text-neutral-500,
.dark .text-neutral-400,
.dark [class*="text-red-"],
.dark [class*="text-green-"],
.dark [class*="text-yellow-"],
.dark [class*="text-amber-"] {
  color: var(--text-muted) !important;
}

.dark a[class*="text-neutral-900"],
.dark a[class*="text-neutral-700"],
.dark a[class*="text-white"] {
  color: var(--text-main) !important;
}

.bg-neutral-950,
button[type="submit"] {
  background-color: var(--button) !important;
  color: var(--button-text) !important;
}

.bg-neutral-950 *,
button[type="submit"] * {
  color: var(--button-text) !important;
}

.dark .bg-neutral-950,
.dark button[type="submit"],
.dark .dark\:bg-white {
  background-color: var(--button) !important;
  color: var(--button-text) !important;
}

.dark .bg-neutral-950 *,
.dark button[type="submit"] *,
.dark .dark\:bg-white * {
  color: var(--button-text) !important;
}

.dark .shadow-sm,
.dark [class*="shadow-"] {
  box-shadow: none !important;
}

/* ── Admin nav ── */
.admin-nav-link {
  color: var(--text-muted);
  border-radius: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition: color 140ms ease, background-color 140ms ease;
  white-space: nowrap;
}

.admin-nav-link:hover {
  color: var(--text-main);
  background-color: var(--surface-muted);
}

.admin-nav-link.is-active {
  color: var(--text-main);
  background-color: var(--surface-muted);
}

/* ── Danger link (delete actions) ── */
.danger-link {
  color: var(--text-muted);
  font-size: 0.75rem;
  transition: color 140ms ease;
}

.danger-link:hover {
  color: #b42318;
}

.dark .danger-link:hover {
  color: #fca5a5;
}

/* ── Danger button (secondary variant, red hover) ── */
.danger-button {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease !important;
}

.danger-button:hover {
  background: rgba(180, 35, 24, 0.08) !important;
  border-color: rgba(180, 35, 24, 0.3) !important;
  color: #b42318 !important;
}

.dark .danger-button:hover {
  background: rgba(252, 165, 165, 0.08) !important;
  border-color: rgba(252, 165, 165, 0.25) !important;
  color: #fca5a5 !important;
}

::selection {
  background: rgba(23, 23, 23, 0.14);
}

.dark ::selection {
  background: rgba(255, 255, 255, 0.18);
}

input,
textarea,
select {
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

input::placeholder,
textarea::placeholder {
  color: #9a9a95;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #777773;
}

details summary::-webkit-details-marker {
  color: #8a8a85;
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  color: #52524f;
  line-height: 1;
}

.icon-box-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.8125rem;
}

.icon-box-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.dark .icon-box {
  color: #d4d4d0;
}

.icon-box i,
button i,
a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-button,
.primary-button:visited {
  align-items: center;
  background: #171717 !important;
  border: 1px solid #171717 !important;
  border-radius: 0.5rem;
  color: #ffffff !important;
  justify-content: center;
  line-height: 1.25rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.primary-button:hover {
  background: #2f2f2f !important;
  border-color: #2f2f2f !important;
  color: #ffffff !important;
}

.primary-button *,
.primary-button:hover * {
  color: inherit !important;
}

.dark .primary-button,
.dark .primary-button:visited {
  background: #f5f5f5 !important;
  border-color: #f5f5f5 !important;
  color: #171717 !important;
}

.dark .primary-button:hover {
  background: #deded9 !important;
  border-color: #deded9 !important;
  color: #171717 !important;
}