/**
 * FineNights reusable UI primitives (buttons, cards, badges, tabs…).
 * Use with fn-tokens.css.
 */

.fn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--fn-fast) var(--fn-ease), border-color var(--fn-fast) var(--fn-ease),
    color var(--fn-fast) var(--fn-ease), transform var(--fn-fast) var(--fn-ease), box-shadow var(--fn-fast) var(--fn-ease);
}

.fn-btn:active {
  transform: scale(0.98);
}

.fn-btn-primary {
  background: var(--fn-accent);
  color: #fff;
  box-shadow: none;
}

.fn-btn-primary:hover {
  background: var(--fn-accent-hot, var(--fn-violet-hot));
  filter: none;
}

.fn-btn-outline,
.fn-btn-create {
  background: transparent;
  border-color: var(--fn-border);
  color: var(--fn-text);
}

.fn-btn-outline:hover,
.fn-btn-create:hover {
  background: var(--fn-surface-2);
  border-color: rgba(255, 255, 255, 0.14);
}

.fn-btn-join {
  background: var(--fn-accent);
  border-color: transparent;
  color: #fff;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.fn-btn-join:hover {
  background: var(--fn-accent-hot, var(--fn-violet-hot));
}

.fn-btn-join.is-in {
  background: rgba(57, 211, 83, 0.14);
  border-color: rgba(57, 211, 83, 0.35);
  color: #86efac;
  box-shadow: none;
}

.fn-btn-join.is-in:hover {
  background: rgba(57, 211, 83, 0.2);
  color: #bbf7d0;
}

.fn-btn-join.is-muted,
.fn-btn-join:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--fn-border);
  color: var(--fn-text-muted);
  box-shadow: none;
  cursor: default;
}

.fn-btn-join.is-pending {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}

.fn-btn-join.is-request {
  background: var(--fn-accent-soft);
  color: #c4b5fd;
}

.fn-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fn-text-secondary);
}

.fn-btn-ghost:hover {
  color: var(--fn-text);
  border-color: transparent;
  background: transparent;
}

.fn-btn-block {
  width: 100%;
}

.fn-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border);
  color: var(--fn-text);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color var(--fn-fast) var(--fn-ease), background var(--fn-fast) var(--fn-ease);
}

.fn-icon-btn:hover {
  border-color: var(--fn-orange);
  background: var(--fn-orange-soft);
  color: var(--fn-orange);
}

.fn-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 8px 0 16px;
  border-radius: var(--fn-radius-control, 6px);
  background: var(--fn-surface-2);
  border: 1px solid var(--fn-border);
}

.fn-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fn-text);
  font: inherit;
  font-size: 14px;
}

.fn-search input::placeholder {
  color: var(--fn-text-muted);
}

/* AI + search inputs — no focus ring rectangle (caret shows edit focus) */
.fn-search:focus-within,
.fn-search input:focus,
.fn-search input:focus-visible,
.fn-catalog-search:focus-within,
.fn-catalog-search input:focus,
.fn-catalog-search input:focus-visible,
.search-input:focus,
.search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.fn-search input::-webkit-search-cancel-button,
.fn-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.fn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--fn-radius-control, 6px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fn-badge-orange {
  color: var(--fn-orange);
  background: var(--fn-orange-soft);
}

.fn-badge-success {
  color: var(--fn-success);
  background: rgba(57, 211, 83, 0.12);
}

.fn-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fn-border);
}

.fn-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fn-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.fn-tab.is-active {
  color: var(--fn-orange);
  border-bottom-color: var(--fn-orange);
}

.fn-card {
  background: var(--fn-card);
  border: 1px solid var(--fn-border);
  border-radius: var(--fn-radius);
  transition: border-color var(--fn-fast) var(--fn-ease), transform var(--fn-fast) var(--fn-ease);
}

.fn-card:hover {
  border-color: rgba(255, 138, 0, 0.35);
}

.fn-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 18px;
  text-align: center;
  color: var(--fn-text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.fn-skeleton {
  background: linear-gradient(90deg, var(--fn-surface-2), var(--fn-surface-3), var(--fn-surface-2));
  background-size: 200% 100%;
  animation: fn-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--fn-radius-sm);
}

@keyframes fn-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.fn-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border);
  background: var(--fn-surface-2);
  color: var(--fn-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--fn-fast) var(--fn-ease), background var(--fn-fast) var(--fn-ease),
    color var(--fn-fast) var(--fn-ease);
}

.fn-chip:hover,
.fn-chip.is-active {
  border-color: var(--fn-orange);
  color: var(--fn-orange);
  background: var(--fn-orange-soft);
}

.fn-cat-btn {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 8px;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border);
  background: var(--fn-surface-2);
  color: var(--fn-text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--fn-fast) var(--fn-ease), background var(--fn-fast) var(--fn-ease);
}

.fn-cat-btn .fn-icon {
  width: 20px;
  height: 20px;
  color: var(--cat-color, var(--fn-orange));
}

.fn-cat-btn.is-active {
  border-color: var(--cat-color, var(--fn-orange));
  background: color-mix(in srgb, var(--cat-color, #ff8a00) 16%, #111419);
}

.fn-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fn-orange);
}

.fn-rating-empty {
  color: var(--fn-text-muted);
}

/* FineNights rating mark — F + blue N tile (logo style), not a star */
.fn-rating-mark {
  --fn-rating-mark-size: 0.95em;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  height: var(--fn-rating-mark-size);
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--fn-rating-mark-size);
  font-weight: 700;
  letter-spacing: -0.04em;
  user-select: none;
  vertical-align: -0.12em;
}

.fn-rating-mark-f,
.fn-rating-mark-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}

.fn-rating-mark-f {
  padding: 0 0.06em 0 0;
}

.fn-rating-mark-n {
  padding: 0.08em 0.14em 0.06em;
  margin-left: 0.02em;
  border-radius: 0.18em;
  background: var(--fn-logo-n, #176BFF);
}

.fn-rating-fn {
  gap: 0.32rem;
  color: var(--fn-text, #fff);
  font-variant-numeric: tabular-nums;
}

.fn-rating-fn.fn-rating-empty {
  color: var(--fn-text-muted, #71717a);
}

.fn-rating-fn-score {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: inherit;
}

/* FineNights venue/person rating badge — pill: FN mark | type | score */
.fn-rating-badge {
  --fn-badge-h: 1.55rem;
  --fn-badge-pad-x: 0.18rem;
  --fn-badge-gap: 0.14rem;
  --fn-badge-logo: calc(var(--fn-badge-h) * 0.64);
  --fn-badge-score-w: calc(var(--fn-badge-h) * 0.8);
  --fn-badge-rx: calc(var(--fn-badge-h) * 0.255);
  --fn-badge-score-rx: calc(var(--fn-badge-h) * 0.164);
  --fn-badge-score-grad: linear-gradient(
    135deg,
    var(--fn-badge-blue-from, #176BFF) 0%,
    var(--fn-badge-blue-to, #073CB8) 100%
  );
  --fn-badge-shell-border: var(--fn-badge-border, #344258);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  user-select: none;
}

.fn-rating-badge.is-sm {
  --fn-badge-h: 1.55rem;
}

.fn-rating-badge.is-md {
  --fn-badge-h: 2.15rem;
}

.fn-rating-badge.is-lg {
  --fn-badge-h: 2.85rem;
}

.fn-rating-badge.is-person {
  --fn-badge-score-grad: linear-gradient(
    135deg,
    var(--fn-badge-purple-from, #7838F5) 0%,
    var(--fn-badge-purple-to, #4A16B8) 100%
  );
  --fn-badge-shell-border: var(--fn-badge-border-person, #44345E);
}

.fn-rating-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--fn-badge-gap);
  box-sizing: border-box;
  height: var(--fn-badge-h);
  padding: var(--fn-badge-pad-x);
  border-radius: var(--fn-badge-rx);
  border: 1.5px solid var(--fn-badge-shell-border);
  background: var(--fn-badge-shell, #090C11);
}

.fn-rating-badge-logo {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  box-sizing: border-box;
  width: var(--fn-badge-logo);
  height: var(--fn-badge-logo);
  border-radius: calc(var(--fn-badge-logo) * 0.186);
  border: 1.5px solid #fff;
  background: var(--fn-badge-logo-bg, #05070A);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: calc(var(--fn-badge-logo) * 0.62);
  line-height: 1;
  color: #fff;
}

.fn-rating-badge-logo-f,
.fn-rating-badge-logo-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.fn-rating-badge-logo-f {
  padding-left: 0.06em;
}

.fn-rating-badge-logo-n {
  position: relative;
}

.fn-rating-badge-logo-n::before {
  content: "";
  position: absolute;
  inset: 6% 8% 6% 0;
  border-radius: calc(var(--fn-badge-logo) * 0.1);
  background: linear-gradient(
    135deg,
    var(--fn-badge-blue-from, #176BFF) 0%,
    var(--fn-badge-blue-to, #073CB8) 100%
  );
  z-index: -1;
}

.fn-rating-badge-rule {
  width: 1.5px;
  height: calc(var(--fn-badge-h) * 0.6);
  flex-shrink: 0;
  border-radius: 1px;
  background: var(--fn-badge-rule, #394454);
}

.fn-rating-badge-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--fn-badge-h) * 0.42);
  height: calc(var(--fn-badge-h) * 0.48);
  color: #fff;
  flex-shrink: 0;
}

.fn-rating-badge-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.fn-rating-badge-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--fn-badge-score-w);
  height: calc(var(--fn-badge-h) - 2 * var(--fn-badge-pad-x));
  padding: 0 0.28em;
  margin-left: 0.06rem;
  border-radius: var(--fn-badge-score-rx);
  background: var(--fn-badge-score-grad);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--fn-badge-h) * 0.355);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fn-rating-badge.is-empty .fn-rating-badge-score {
  opacity: 0.72;
}

/* Badge-as-control: no outer chrome — the pill itself is the hit target */
a.fn-rating-badge,
button.fn-rating-badge,
.fn-rating-badge.is-interactive {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a.fn-rating-badge:hover .fn-rating-badge-inner,
button.fn-rating-badge:hover .fn-rating-badge-inner,
.fn-rating-badge.is-interactive:hover .fn-rating-badge-inner {
  border-color: color-mix(in srgb, var(--fn-badge-shell-border) 70%, #fff);
}

a.fn-rating-badge:focus-visible,
button.fn-rating-badge:focus-visible,
.fn-rating-badge.is-interactive:focus-visible {
  outline: 2px solid var(--fn-accent, #8b5cf6);
  outline-offset: 3px;
  border-radius: var(--fn-badge-rx);
}

button.fn-rating-badge.fn-place-fn-btn {
  --fn-badge-h: 1.4rem;
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 0;
  min-width: 0;
}

.fn-review-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--fn-radius);
  border: 1px solid var(--fn-border);
  background: var(--fn-card);
}

.fn-review-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--fn-text-muted);
}

.fn-review-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fn-text-secondary);
}

.fn-select {
  appearance: none;
  min-height: 40px;
  padding: 0 36px 0 12px;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border);
  background: var(--fn-surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a7abb2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--fn-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fn-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.fn-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.fn-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.fn-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--fn-radius-round, 999px);
  background: var(--fn-surface-3);
  border: 1px solid var(--fn-border);
  cursor: pointer;
  transition: background var(--fn-fast) var(--fn-ease);
}

.fn-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--fn-fast) var(--fn-ease);
}

.fn-switch input:checked + .fn-switch-slider {
  background: var(--fn-orange);
  border-color: var(--fn-orange);
}

.fn-switch input:checked + .fn-switch-slider::after {
  transform: translateX(18px);
}

.fn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--fn-bottom-nav-h, 64px) + 16px);
  transform: translateX(-50%);
  z-index: 80;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--fn-radius-control, 6px);
  background: var(--fn-surface-3);
  border: 1px solid var(--fn-border-strong);
  color: var(--fn-text);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.fn-view-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--fn-radius-control, 6px);
  border: 1px solid var(--fn-border);
  background: var(--fn-surface-2);
}

.fn-view-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fn-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
  min-width: 64px;
  padding: 0 16px;
  border-radius: var(--fn-radius-control, 6px);
  cursor: pointer;
  text-decoration: none;
}

.fn-view-toggle-btn--list {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
  padding-top: 4px;
  padding-bottom: 4px;
}

.fn-view-toggle-label {
  display: block;
  line-height: 1.1;
}

.fn-view-toggle-count {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--fn-text-muted);
  opacity: 0.85;
  min-height: 10px;
}

.fn-view-toggle-btn.is-active .fn-view-toggle-count {
  color: rgba(10, 10, 10, 0.72);
  opacity: 1;
}

.fn-view-toggle-btn.is-active {
  background: var(--fn-orange);
  color: #0a0a0a;
}

@media (prefers-reduced-motion: reduce) {
  .fn-btn,
  .fn-icon-btn,
  .fn-skeleton,
  .fn-card,
  .fn-chip,
  .fn-cat-btn,
  .fn-switch-slider,
  .fn-switch-slider::after {
    transition: none;
    animation: none;
  }
}