/* Shared final UI layer. No framework; selectors stay within FineNights components. */
:root {
  --fn-type-body: 1rem;
  --fn-type-meta: 0.875rem;
  --fn-type-small: 0.75rem;
  --fn-on-accent: #101014;
}
.fn-btn-primary,
.fn-btn-join:not(.is-in):not(.is-muted):not(.is-pending):not(:disabled),
.account-link-btn-primary,
.fn-acct-btn-primary,
.fn-nights-create-submit,
.fn-create-wizard-next,
.fn-social-detail-btn-join:not(.is-joined):not(.is-pending):not(:disabled),
.fn-social-detail-btn-signin {
  background: var(--fn-accent);
  color: var(--fn-on-accent);
  border-color: transparent;
  box-shadow: none;
}
.fn-btn-primary:hover,
.account-link-btn-primary:hover,
.fn-acct-btn-primary:hover,
.fn-nights-create-submit:hover:not(:disabled),
.fn-create-wizard-next:hover:not(:disabled),
.fn-social-detail-btn-join:hover:not(:disabled),
.fn-social-detail-btn-signin:hover {
  background: var(--fn-accent-hot);
  color: var(--fn-on-accent);
  box-shadow: none;
}
.fn-btn, .account-link-btn { min-height: 44px; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card, .fn-sc-overlay) .fn-sc-btn-primary:not(.is-in):not(.is-pending):not(.is-muted):not(:disabled) {
  background: var(--fn-accent);
  border-color: var(--fn-accent);
  color: var(--fn-on-accent);
}
:is(.fn-sn-card, .fn-tour-card, .fn-event-card, .fn-sc-overlay) .fn-sc-btn-primary:not(.is-in):not(.is-pending):not(.is-muted):not(:disabled):hover {
  background: var(--fn-accent-hot);
  border-color: var(--fn-accent-hot);
}
.fn-social-detail-btn-join:disabled:not(.is-pending):not(.is-joined) {
  background: var(--fn-surface-2);
  border-color: var(--fn-border);
  color: var(--fn-text-secondary);
  box-shadow: none;
  opacity: 1;
}
.fn-bottom-nav-item.is-active { background: var(--fn-accent-soft); }
.fn-social-detail-btn[hidden], .fn-social-detail-join-status[hidden], .fn-create-draft[hidden] { display: none; }
.fn-social-detail-btn-join.is-pending,
.fn-social-detail-chip.is-pending {
  background: var(--fn-accent-soft);
  border-color: var(--fn-accent);
  color: #ffc078;
  opacity: 1;
  box-shadow: none;
}
.fn-social-detail-chip.is-in,
.fn-social-detail-chip.is-host,
.fn-social-detail-btn-join.is-joined,
.fn-social-detail-btn-join.is-joined:disabled {
  background: rgba(57, 211, 83, .12);
  border-color: rgba(57, 211, 83, .35);
  color: #86efac;
  box-shadow: none;
}
.fn-social-detail-price-note { display: block; margin-top: 4px; color: var(--fn-text-secondary); font-size: var(--fn-type-meta); font-weight: 400; }
.fn-social-detail-panel { background: var(--fn-surface-2); }
.fn-social-detail-kicker,
.fn-social-detail-facts a,
.fn-nights-create-kicker { color: var(--fn-accent); }
.fn-nights-create-soft-gate a, .fn-nights-create-upgrade-link { color: #d1b5ff; text-decoration: underline; text-underline-offset: 3px; }
.fn-nights-create-input { font-size: var(--fn-type-body); }
.fn-nights-create-label { font-size: var(--fn-type-meta); }
.fn-nights-create-panel { background: var(--fn-surface-2); }
.fn-create-draft { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm); }
.fn-create-draft p { flex: 1 1 180px; margin: 0; color: var(--fn-text-secondary); font-size: var(--fn-type-meta); }
.fn-create-draft button { padding-inline: 8px; }
/* Keep the visual progress line thin, but give every step a 44px hit area. */
.fn-create-wizard-dots { margin-block: 0; }
.fn-create-wizard-dot button { height: 44px; position: relative; background: transparent; }
.fn-create-wizard-dot button::before { content: ""; position: absolute; top: 20px; left: 0; right: 0; height: 4px; border-radius: 4px; background: #45454f; }
.fn-create-wizard-dot.is-current button, .fn-create-wizard-dot.is-done button { background: transparent; }
.fn-create-wizard-dot.is-current button::before { background: var(--fn-accent); }
.fn-create-wizard-dot.is-done button::before { background: var(--fn-text-secondary); }
.fn-create-wizard-step-title:focus { outline: none; }
.fn-home-section-loading { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; border-radius: var(--fn-radius); background: var(--fn-surface-2); color: var(--fn-text-secondary); }
.fn-home-state-text { line-height: 1.5; }
.fn-home-state-actions .fn-btn { white-space: normal; text-align: center; }
.fn-home-section-link { min-height: 44px; display: inline-flex; align-items: center; }
.account-social-status.is-error { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px solid #7f3434; border-radius: var(--fn-radius); }
/* A card without a photograph should not reserve a large blank photo area. */
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-media.is-empty { height: 56px; aspect-ratio: auto; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-media.is-empty .fn-sc-media-fade { display: none; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-badge { font-size: var(--fn-type-small); letter-spacing: .02em; max-width: calc(100% - 60px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-btn-save { width: 44px; height: 44px; min-width: 44px; min-height: 44px; top: 6px; right: 6px; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-body { padding: 12px; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-title {
  font-size: 1rem; line-height: 1.3; min-height: 2.6em; max-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) :is(.fn-sc-when, .fn-sc-venue-loc, .fn-sc-host-meta, .fn-sc-price-meta, .fn-sc-seats-left, .fn-sc-seats-going) { font-size: .8125rem; line-height: 1.4; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-venue-label { font-size: .75rem; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-venue-name { font-size: .875rem; line-height: 1.35; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-price-amount { font-size: 1rem; }
:is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-btn { min-height: 44px; font-size: .875rem; line-height: 1.3; }
.fn-place-card-name { font-size: 1rem; line-height: 1.3; min-height: 2.6em; }
.fn-place-card-meta, .fn-place-card-status { font-size: .8125rem; line-height: 1.4; }
/* Cabinet: secondary header actions live in a native, keyboard-accessible menu. */
.fn-vc-header-more { position: relative; }
.fn-vc-header-more summary { list-style: none; font-size: 24px; }
.fn-vc-header-more summary::-webkit-details-marker { display: none; }
.fn-vc-header-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(260px, 80vw); padding: 8px; background: var(--fn-surface-2); border: 1px solid var(--fn-border); border-radius: 12px; box-shadow: 0 16px 40px #0009; }
.fn-vc-header-menu .account-link-btn { width: 100%; justify-content: flex-start; padding: 10px; white-space: normal; text-align: left; }
.fn-vc-menu-label { display: inline; }
.fn-vc-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fn-vc-kpi { padding: 12px; min-height: 80px; }
.fn-vc-kpi-num { font-size: 1.75rem; }
.fn-vc-overview-grid:not(:has(.fn-vc-side-stack)) { grid-template-columns: 1fr; }
@media (max-width: 959px) {
  body.account-page:not(.fn-venue-cabinet-page) .fn-bottom-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.account-page:not(.fn-venue-cabinet-page) .account-main { padding-bottom: calc(var(--fn-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 32px); }
  .fn-venue-cabinet-page .account-topbar { display: flex; gap: 8px; padding-inline: 12px; }
  .fn-venue-cabinet-page .account-brand { min-width: 0; flex: 0 1 112px; }
  .fn-venue-cabinet-page .account-brand-logo { max-width: 100%; height: auto; }
  .fn-venue-cabinet-page .account-topbar-actions { min-width: 0; gap: 6px; }
  .fn-venue-cabinet-page .fn-vc-top-actions { gap: 6px; }
  .fn-venue-cabinet-page .fn-header-notify { display: none; }
}
@media (max-width: 599px) {
  .fn-acct-quick { grid-template-columns: 1fr; }
  .fn-acct-quick-copy strong { white-space: normal; overflow: visible; text-overflow: clip; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-body { padding: 10px; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) :is(.fn-sc-desc, .fn-sc-host, .fn-sc-venue-label, .fn-sc-facts) { display: none; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-meeting { margin-block: 8px; padding-block: 8px; gap: 6px; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-faces { display: none; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-people { min-height: 44px; margin-top: 0; }
  :is(.fn-sn-card, .fn-tour-card, .fn-event-card) .fn-sc-footer { margin-top: auto; padding-top: 10px; }
  .fn-vc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fn-vc-kpi:first-child { grid-column: 1 / -1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fn-vc-kpi:first-child .fn-vc-kpi-value { display: flex; align-items: center; gap: 8px; }
  .fn-vc-kpi-label { font-size: .75rem; }
  .fn-vc-quick-actions .account-link-btn { flex: 1 1 140px; }
}
.fn-nights-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .fn-nights-rail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fn-nights-rail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 959px) {
  .fn-page-social-detail .fn-main { padding-bottom: calc(var(--fn-bottom-nav-h) + var(--fn-safe-bottom) + var(--fn-social-dock-h, 180px) + 24px); }
  .fn-social-detail-join { background: var(--fn-bg); border-top: 1px solid var(--fn-border); }
}