/* styles.css — Fortuna design system: "dark luxe gallery".
 *
 * Near-black surround derived from the brand navy (#1d2d50 → --ink) so the
 * styled-interior photography carries the light; terracotta is used SPARINGLY
 * (star, drop glow, links, masthead rule) — scarcity is what reads premium.
 * One easing everywhere; nothing bounces. Tabler icons only, never emoji. */

:root {
  color-scheme: dark;
  --ink: #0e1320;
  --ink-2: #121a2b;
  --panel: #161d30;
  --panel-2: #1b2338;
  --hairline: rgba(247, 241, 237, .08);
  --hairline-strong: rgba(247, 241, 237, .18);
  --cream: #f7f1ed;
  --stone: #96a0b5;
  --stone-dim: #7b86a3;   /* ≥4.5:1 on both --ink and --panel (WCAG AA small text) */
  --terra: #a33e16;
  --terra-bright: #d4632a;   /* 4.96:1 on --ink — link/accent text passes AA */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, .38);
  --shadow-float: 0 24px 60px rgba(0, 0, 0, .55);
  --radius: 10px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 22px; --sp-5: 36px; --sp-6: 58px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Overpass', system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(29, 45, 80, .55), transparent 70%),
    var(--ink);
  color: var(--cream);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
/* Film grain — the photographic cue. Fixed, non-interactive, nearly invisible. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
button:not(:disabled) { cursor: pointer; }
input, textarea { font: inherit; }
a { color: var(--terra-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--terra-bright); outline-offset: 3px; border-radius: 4px; }

.overline {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone);
}
.serif { font-family: 'EB Garamond', Georgia, serif; }

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.pf-app { max-width: 1480px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); position: relative; z-index: 1; }
.pf-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.pf-masthead-title .overline { display: block; margin-bottom: 6px; }
.pf-masthead-title h1 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05; letter-spacing: .01em; color: var(--cream);
}
.pf-masthead-title h1 em { font-style: italic; color: var(--stone); }
.pf-masthead-rule { width: 64px; height: 2px; background: var(--terra); margin-top: 14px; }
.pf-masthead-actions { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); color: var(--cream);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  background: rgba(247, 241, 237, .03);
}
.btn:hover { border-color: rgba(247, 241, 237, .4); background: rgba(247, 241, 237, .06); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--terra); border-color: transparent; }
.btn-primary:hover { background: var(--terra-bright); border-color: transparent; }
.btn-icon { padding: 10px 12px; }
.btn-text { color: var(--stone); font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 6px; }
.btn-text:hover { color: var(--cream); }
.btn .ti { font-size: 16px; line-height: 1; }

/* ── Wheel sections ────────────────────────────────────────────────────────── */
.fw-section { margin-bottom: var(--sp-5); }
.fw-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); padding: 0 2px; }
.fw-head h2 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: 21px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
}
.fw-head .fw-count { font-size: 12px; color: var(--stone-dim); font-weight: 600; letter-spacing: .06em; }
.fw-head .fw-spacer { flex: 1; }
.fw-playpause { color: var(--stone-dim); padding: 4px 8px; border-radius: 6px; font-size: 16px; }
.fw-playpause:hover { color: var(--cream); }

.fw-viewport {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  touch-action: pan-y;             /* horizontal scrub is ours; vertical page scroll stays native */
}
.fw-track { position: absolute; inset: 0; }

/* Cards */
.fw-card {
  position: absolute; top: 12px; left: 0;
  text-align: left; padding: 0;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.fw-card:focus-visible { outline-offset: 6px; }
.fw-media {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2;
  border-radius: var(--radius); overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--hairline);
}
.fw-media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
  transition: transform .6s var(--ease);
}
.fw-card:hover .fw-media img { transform: scale(1.045); }
.fw-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: rgba(163, 62, 22, .82);
  padding: 4px 9px 3px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.fw-fav-mark {
  position: absolute; top: 10px; right: 10px; font-size: 14px; color: var(--cream);
  background: rgba(14, 19, 32, .55); border-radius: 999px; padding: 5px 6px 3px;
  backdrop-filter: blur(4px);
}
.fw-fav-mark .ti-star-filled { color: var(--terra-bright); }
.fw-label { display: block; padding: 11px 4px 0; }
.fw-addr {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fw-sub {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Monogram tile — a project with no photos yet is still presentable. */
.fw-mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--panel) 0%, var(--ink-2) 100%);
}
.fw-mono span {
  font-family: 'EB Garamond', Georgia, serif; font-size: 64px; font-weight: 500;
  color: rgba(247, 241, 237, .13);
}
.fw-mono small {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone-dim);
}

/* Skeletons */
.fw-skel .fw-media { box-shadow: inset 0 0 0 1px var(--hairline); }
.fw-skel-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(247, 241, 237, .05) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: pfShimmer 1.6s linear infinite;
}
@keyframes pfShimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }
.fw-skel-line { height: 11px; border-radius: 4px; background: rgba(247, 241, 237, .06); margin: 12px 4px 0; width: 70%; }

/* Empty favourites hint */
.fw-hint {
  height: 100%; margin: 12px 2px; display: grid; place-items: center;
  border: 1px dashed rgba(163, 62, 22, .5); border-radius: 14px;
  animation: pfBreathe 4s var(--ease) infinite;
}
.fw-hint p { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: var(--stone); }
@keyframes pfBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Drop target glow while dragging a card over a wheel */
.fw-section.fw-drop .fw-viewport {
  box-shadow: inset 0 0 0 1px var(--terra), inset 0 0 48px rgba(163, 62, 22, .16);
  border-radius: 14px;
}
.fw-drag-proxy {
  position: fixed; z-index: 200; pointer-events: none;
  transform-origin: 50% 50%;
  box-shadow: var(--shadow-float);
  border-radius: var(--radius);
  opacity: .92;
}

/* Reduced motion: wheels become native scroll-snap rows, nothing auto-moves. */
.fw-viewport.fw-static {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  -webkit-mask-image: none; mask-image: none;
  display: flex; gap: var(--fw-gap, 18px); padding: 12px 2px;
  touch-action: auto;
}
.fw-viewport.fw-static .fw-card { position: static; flex: 0 0 auto; scroll-snap-align: start; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .fw-hint { animation: none; }
  .fw-skel-shimmer { animation: none; }
  .fw-media img { transition: none; }
}

/* ── Expanded panel (the hover lens) ───────────────────────────────────────── */
.pf-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(7, 10, 18, .58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .32s var(--ease);
}
.pf-backdrop.open { opacity: 1; }
.pf-panel {
  position: fixed; z-index: 101;
  width: min(760px, 94vw);
  background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 16px; box-shadow: var(--shadow-float);
  padding: var(--sp-4);
  transform-origin: 0 0;
}
.pf-panel-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: var(--sp-3); }
.pf-panel-photos .pf-ph { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hairline); }
.pf-ph-hero { aspect-ratio: 3 / 2.1; grid-row: span 2; }
.pf-ph-side { aspect-ratio: 3 / 2.05; }
.pf-panel-photos img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.03) contrast(1.02); }
.pf-panel-addr { font-family: 'EB Garamond', Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1.15; }
.pf-panel-meta { margin-top: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.pf-panel-meta .sold { color: var(--terra-bright); }
.pf-panel-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.pf-panel-note { margin-top: 10px; font-size: 12.5px; color: var(--stone-dim); }
.pf-star.on .ti { color: var(--terra-bright); }

/* Add-photos mini form inside the panel */
.pf-addform { margin-top: var(--sp-3); border-top: 1px solid var(--hairline); padding-top: var(--sp-3); display: grid; gap: 8px; }
.pf-addform label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-dim); }

/* Inputs */
.pf-input, .pf-textarea {
  width: 100%; background: var(--ink-2); color: var(--cream);
  border: 1px solid var(--hairline-strong); border-radius: 8px;
  padding: 10px 12px; font-size: 14px;
  transition: border-color .25s var(--ease);
}
.pf-input:focus, .pf-textarea:focus { outline: none; border-color: rgba(201, 88, 31, .65); }
.pf-textarea { resize: vertical; min-height: 74px; }

/* ── Composer sheet ────────────────────────────────────────────────────────── */
.pf-sheet-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(7, 10, 18, .5); opacity: 0; transition: opacity .32s var(--ease); }
.pf-sheet-backdrop.open { opacity: 1; }
.pf-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 111;
  width: min(520px, 100vw);
  background: var(--ink-2); border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-float);
  transform: translateX(103%); transition: transform .42s var(--ease);
  display: flex; flex-direction: column;
}
.pf-sheet.open { transform: translateX(0); }
.pf-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--hairline); }
.pf-sheet-head h2 { font-family: 'EB Garamond', Georgia, serif; font-size: 23px; font-weight: 500; }
.pf-sheet-body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; }
.pf-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-dim); margin-bottom: 6px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 8px; }
.pf-chips:focus-within { border-color: rgba(201, 88, 31, .65); }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--hairline); padding: 4px 8px 4px 11px; border-radius: 999px; font-size: 12.5px; }
.pf-chip button { color: var(--stone); font-size: 13px; line-height: 1; padding: 1px; }
.pf-chip button:hover { color: var(--cream); }
.pf-chips input { flex: 1; min-width: 140px; background: none; border: 0; color: var(--cream); font-size: 13.5px; padding: 4px; }
.pf-chips input:focus { outline: none; }
.pf-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--cream); }
.pf-check input { width: 15px; height: 15px; accent-color: var(--terra); }
.pf-favstrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.pf-favstrip .pf-fav {
  position: relative; flex: 0 0 auto; width: 108px; border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: opacity .25s var(--ease);
}
.pf-favstrip .pf-fav img, .pf-favstrip .pf-fav .ph { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.pf-favstrip .pf-fav .ph { background: var(--panel); }
.pf-favstrip .pf-fav small { display: block; padding: 4px 6px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-favstrip .pf-fav .pf-fav-x {
  position: absolute; top: 4px; right: 4px; color: var(--cream);
  background: rgba(14, 19, 32, .6); border-radius: 999px; width: 20px; height: 20px;
  font-size: 12px; display: grid; place-items: center;
}
.pf-favstrip .pf-fav.off { opacity: .32; }
.pf-preview { border: 1px solid var(--hairline-strong); border-radius: 10px; overflow: hidden; background: #f4f6f9; }
.pf-preview iframe { display: block; width: 100%; height: 360px; border: 0; background: #f4f6f9; }
.pf-banner {
  border: 1px solid rgba(201, 88, 31, .5); background: rgba(163, 62, 22, .12);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--cream);
}
.pf-sheet-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: var(--sp-2); }
.pf-send-status { font-size: 12.5px; color: var(--stone); }

/* ── Setup screen / empty state / toast ────────────────────────────────────── */
.pf-center { min-height: 82vh; display: grid; place-items: center; padding: var(--sp-4); }
.pf-setup { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: 16px; padding: var(--sp-5); box-shadow: var(--shadow-float); }
.pf-setup h1 { font-family: 'EB Garamond', Georgia, serif; font-size: 28px; font-weight: 500; margin: 8px 0 4px; }
.pf-setup p { font-size: 13.5px; color: var(--stone); line-height: 1.55; margin-bottom: var(--sp-3); }
.pf-setup .row { display: flex; gap: 8px; margin-top: 6px; }
.pf-empty { text-align: center; color: var(--stone); }
.pf-empty .ti { font-size: 40px; color: var(--stone-dim); }
.pf-empty h2 { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: 26px; margin: 10px 0 6px; color: var(--cream); }

.pf-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
  z-index: 120; background: var(--panel-2); border: 1px solid var(--hairline-strong);
  color: var(--cream); font-size: 13.5px; padding: 11px 18px; border-radius: 999px;
  box-shadow: var(--shadow-float); opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  max-width: 88vw; text-align: center;
}
.pf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.pf-statusline { margin-top: -14px; margin-bottom: var(--sp-4); font-size: 12px; color: var(--stone-dim); letter-spacing: .04em; }

@media (max-width: 720px) {
  .pf-app { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
  .pf-masthead { flex-direction: column; align-items: flex-start; }
  .pf-panel { width: 94vw; }
  .pf-panel-photos { grid-template-columns: 1fr; }
  .pf-ph-hero { grid-row: auto; }
}