/* LigaGarden customer app. Direction A, "dark premium", as approved by the owner. */
@font-face { font-family: 'Frank Ruhl Libre'; src: url('/fonts/frank-ruhl-libre-hebrew-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; src: url('/fonts/frank-ruhl-libre-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-hebrew-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-hebrew-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-hebrew-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
/* Josefin Sans 600, Latin only, for the words on the opening screen. OFL: fonts/LICENSE-josefin-sans.txt */
@font-face { font-family: 'Josefin Sans'; src: url('/fonts/josefin-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Heebo'; src: url('/fonts/heebo-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  --serif: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --sans: 'Heebo', Arial, sans-serif;
  --mark: 'Josefin Sans', 'Heebo', Arial, sans-serif;
  --nav-h: 72px;
  --top-h: 56px;
  --banner-h: 0px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --forest: #1B2A21;
  --deep: #1F3D2B;
  --night: #0F1813;
  --line-dark: #22352A;
  --cream: #F6F3EC;
  --gold: #D9B77E;
  --mist: #C9D3C8;
  --sage: #9AA89D;
  --bronze: #6B5A35;
  --stone: #D5CFC0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); background: var(--forest); color: var(--cream); -webkit-text-size-adjust: 100%; }
#app { height: 100dvh; }
h1, h2, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; flex: none; }
.no-script { padding: 24px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.is-light :focus-visible { outline-color: var(--deep); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* App frame */
.app { position: relative; height: 100dvh; overflow: hidden; }
.app.is-dark { background: var(--forest); }
.app.is-light { background: var(--cream); color: var(--deep); }
.app.has-banner { --banner-h: 36px; }
.banner { position: absolute; z-index: 30; inset: var(--safe-t) 0 auto; height: var(--banner-h); display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--forest); font-size: 14px; font-weight: 700; }
.view { position: absolute; inset: 0 0 calc(var(--nav-h) + var(--safe-b)); }

/* Bottom navigation */
.nav { position: absolute; z-index: 20; inset: auto 0 0; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; }
.is-dark .nav { background: var(--night); border-top: 1px solid var(--line-dark); }
.is-light .nav { background: #fff; border-top: 1px solid #E3DED2; }
.nav a { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; text-decoration: none; }
.is-dark .nav a { color: var(--sage); }
.is-light .nav a { color: #5E6B62; }
.nav a[aria-current='page'] { font-weight: 700; }
.is-dark .nav a[aria-current='page'] { color: var(--cream); }
.is-light .nav a[aria-current='page'] { color: var(--deep); }

/* Feed. The full-height snap comes from the old app's feed, see app.js. */
.feed-frame { position: absolute; inset: 0; }
.feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.page { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: var(--forest); }
.page-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top { position: absolute; z-index: 10; inset: calc(var(--safe-t) + var(--banner-h)) 0 auto; height: var(--top-h); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 20, 15, .62) 0%, rgba(12, 20, 15, .4) 60%, rgba(12, 20, 15, 0) 100%); }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--cream); direction: ltr; }
.counter { min-width: 52px; padding: 5px 12px; border-radius: 999px; background: rgba(15, 24, 19, .55); font-size: 13px; color: var(--cream); text-align: center; direction: ltr; }
.overlay { position: absolute; inset: auto 0 0; padding: 88px 18px 14px; background: linear-gradient(to top, rgba(12, 20, 15, .92) 0%, rgba(12, 20, 15, .82) 45%, rgba(12, 20, 15, .4) 75%, rgba(12, 20, 15, 0) 100%); }
.garden-name { font-size: 13px; color: var(--gold); font-weight: 500; }
.title { margin-top: 4px; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--cream); }
.date { margin-top: 4px; font-size: 13px; color: var(--mist); }
.desc { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desc.is-open { display: block; max-height: 38dvh; overflow-y: auto; }
.more { min-height: 44px; min-width: 44px; font-size: 14px; font-weight: 700; color: var(--gold); text-align: start; }
.more[hidden] { display: none; }
.dashes { margin-top: 8px; display: flex; gap: 5px; }
.dashes span { width: 20px; height: 3px; border-radius: 2px; background: var(--cream); opacity: .4; }
.dashes span.is-on { opacity: 1; }
.progress { margin-top: 10px; height: 3px; background: rgba(246, 243, 236, .18); }
.progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; }
.sound { position: absolute; z-index: 5; top: calc(var(--safe-t) + var(--banner-h) + var(--top-h) + 4px); left: 16px; min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(15, 24, 19, .62); font-size: 14px; font-weight: 500; color: var(--cream); }
.poster { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, #2C4A38 0%, var(--forest) 68%); }
.poster[hidden] { display: none; }
.play-disc { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(246, 243, 236, .14); border: 1.5px solid rgba(246, 243, 236, .55); color: var(--cream); }
.text-page { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #2C4A38 0%, var(--forest) 70%); }

.message { height: 100%; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: var(--cream); }
.message h1 { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.message p { max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--mist); }
.message svg { color: var(--gold); }
.is-light .message, .is-light .message p { color: var(--deep); }
.is-light .message .retry { border-color: var(--stone); }
.message .retry { min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--mist); }

/* Gallery */
.scroll { height: 100%; overflow-y: auto; padding-top: calc(var(--safe-t) + var(--banner-h)); }
.gallery-head { padding: 20px 20px 12px; }
.gallery-head .eyebrow { font-size: 13px; color: var(--bronze); }
.gallery-head h1 { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--deep); line-height: 1.25; }
.filters { padding: 0 20px 8px; display: flex; gap: 8px; }
.filters button { min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--stone); color: var(--deep); font-size: 14px; }
.filters button[aria-pressed='true'] { background: var(--deep); border-color: var(--deep); color: var(--cream); font-weight: 700; }
.month { padding: 14px 20px 8px; font-size: 14px; font-weight: 700; color: #3F5446; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 20px; }
.tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--forest); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.is-video { background: radial-gradient(circle at 50% 42%, #2C4A38 0%, var(--forest) 72%); }
.tile-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.tile-frame.is-ready { opacity: 1; }
.badge { position: absolute; bottom: 6px; left: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15, 24, 19, .72); color: var(--cream); }
.gallery-empty { padding: 28px 16px; color: #4A5A4F; font-size: 16px; text-align: center; }

/* My garden */
.hero { position: relative; height: 260px; background: radial-gradient(circle at 50% 42%, #2C4A38 0%, var(--forest) 72%); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile { position: relative; margin: -36px 16px 0; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(31, 61, 43, .14); }
.profile .label { font-size: 13px; color: var(--bronze); }
.profile h1 { margin-top: 2px; font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--deep); line-height: 1.25; overflow-wrap: anywhere; }
.profile .by { margin-top: 4px; font-size: 14px; color: #4A5A4F; }
.stats { margin: 12px 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 14px 16px; background: #fff; border-radius: 12px; }
.stat dt { font-size: 13px; color: #4A5A4F; }
.stat dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--deep); }
.actions { margin: 16px 16px 0; display: grid; gap: 10px; }
.btn { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; }
.btn.primary { background: var(--deep); color: var(--cream); }
.btn.secondary { background: transparent; border: 1px solid var(--stone); color: var(--deep); font-weight: 500; }
.foot { margin: 14px 16px 24px; font-size: 13px; line-height: 1.5; color: #4A5A4F; text-align: center; }
.foot a { display: inline-flex; min-height: 44px; align-items: center; color: var(--deep); }

/* Invite, expired, signed out */
.door { min-height: 100dvh; padding: calc(var(--safe-t) + 44px) 28px calc(var(--safe-b) + 28px); background: var(--deep); color: var(--cream); display: flex; flex-direction: column; }
.door-mark { display: flex; align-items: center; gap: 10px; color: var(--gold); }
.door-mark .wordmark { color: var(--cream); font-size: 24px; }
.door-body { margin-top: auto; padding-top: 48px; }
.door h1 { font-family: var(--serif); font-size: 38px; font-weight: 700; line-height: 1.18; }
.door .lead { margin-top: 14px; font-size: 17px; line-height: 1.5; color: #D6DED4; }
.chip { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 14px; border-radius: 999px; background: rgba(246, 243, 236, .1); color: var(--cream); font-size: 15px; font-weight: 500; }
.chip svg { color: var(--gold); }
.door-action { margin-top: 28px; width: 100%; height: 56px; border-radius: 14px; background: var(--gold); color: var(--forest); font-size: 18px; font-weight: 700; }
.door-action:disabled { opacity: .7; }
.door-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #D6DED4; }
.door-note a { color: var(--cream); display: inline-flex; min-height: 44px; align-items: center; }
.door-warn { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(217, 183, 126, .16); font-size: 14px; line-height: 1.5; color: var(--cream); }

.plain { background: var(--cream); color: var(--deep); }
.plain-page { max-width: 34em; margin: 0 auto; padding: 48px 20px; font-size: 17px; line-height: 1.6; }
.plain-page h1 { font-family: var(--serif); font-size: 30px; margin-bottom: 12px; }
.plain-page p { margin-bottom: 12px; }

/* Opening screen. Over the app, which is laid out behind it, so nothing moves when it leaves. */
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; overflow: hidden; isolation: isolate; background: var(--forest); transition: opacity .4s ease; animation: splash-failsafe 0s linear 6.6s forwards; }
.splash.is-leaving { opacity: 0; pointer-events: none; }
.splash-photo { position: absolute; z-index: -2; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(3px); opacity: 0; animation: splash-drift 24s ease-in-out infinite alternate; }
.splash-shade { position: absolute; z-index: -1; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 42%, rgba(15, 24, 19, .35) 0%, rgba(15, 24, 19, .62) 55%, rgba(15, 24, 19, .88) 100%); }
.has-photo .splash-photo, .has-photo .splash-shade { opacity: 1; }
/* The words sit inside the leaf-free circle in the middle of the wreath, which is 15% of its
   width in radius, so no leaf crosses them at any angle. Checked in the browser at four angles. */
.splash-mark { position: relative; width: min(80vw, 340px); aspect-ratio: 1; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.splash-wreath { position: absolute; inset: 0; width: 100%; height: 100%; animation: splash-turn 9s linear infinite; }
.splash-words { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mark); font-weight: 600; color: var(--cream); line-height: 1; letter-spacing: .06em; }
.splash-words b { font-size: clamp(20px, 6vw, 25px); font-weight: 600; }
.splash-words span { margin-top: 4px; font-size: clamp(11px, 3.3vw, 14px); letter-spacing: .12em; }
.splash-status { min-height: 1.5em; font-size: 14px; line-height: 1.5; color: var(--cream); opacity: .85; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); text-align: center; padding: 0 24px; }
@keyframes splash-turn { to { transform: rotate(360deg); } }
@keyframes splash-drift { to { transform: scale(1.1); } }
/* Only if the script never ran. Otherwise the screen is long gone. */
@keyframes splash-failsafe { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) { .feed { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { .splash-wreath { animation: none; } .splash-photo { animation: none; } }
@media (prefers-reduced-motion: reduce) { .splash { transition-duration: .12s; } }