/* Spark Hub
   Most component styling is inline (ported 1:1 from the design file);
   this sheet holds the frame, pseudo-states and anything inline styles can't express. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #dcdfe4;
  font-family: Figtree, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: #5b4ae8; text-decoration: none; }
a:hover { color: #4a3ad4; }

button { -webkit-appearance: none; appearance: none; }
textarea { font-family: inherit; }

@keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.date-fld[data-empty] { color: transparent !important; }
.date-fld[data-empty]::-webkit-datetime-edit { color: transparent; }
input::placeholder, textarea::placeholder { color: #b9bcc4; font-weight: 400; font-style: italic; opacity: 1; }

/* ---- Frame: full-bleed on phones, centred ~430px column on desktop ---- */
/* Tab bar: 13px above the icons; below them only as much as the iPhone home indicator
   needs (its inset less 8px, at least 14px), so the bar doesn't look bottom-heavy */
:root {
  --nav-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) - 8px));
  --nav-h: calc(58px + var(--nav-bottom));
}
/* iPhone status bar: the page runs under it (black-translucent, white time/battery).
   Photo-topped screens let the photo show through (--pt pushes their controls down);
   the rest continue their white header behind it. */
:root { --sat: env(safe-area-inset-top, 0px); --pt: 0px; }
.app.photo-top { --pt: var(--sat); }
.app::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--sat);
  /* Plain white, continuing the white headers (owner's call: the white status text
     may be hard to see on these screens for now) */
  background: #fff;
  z-index: 20; pointer-events: none;
}
.app.photo-top::before { display: none; }
.app:not(.photo-top) .scroller { top: var(--sat); }
/* No tab bar on Welcome */
.app.no-nav { --nav-h: 0px; }

.app {
  /* Pinned to the screen's edges rather than 100dvh: an installed iPhone app measures
     100dvh short on first load (without the status bar), leaving a gap under the tab bar */
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  background: #e8eaee;
  font-family: Figtree, system-ui, sans-serif;
}

/* Installed app (iOS 26): 100%/100dvh come out short by the status bar there; 100lvh is the
   full screen height */
@media (display-mode: standalone) {
  html, body { height: 100lvh; }
  .app { bottom: auto; height: 100lvh; }
}

@media (min-width: 520px) and (min-height: 700px) {
  .app {
    top: 24px; bottom: 24px; height: auto;
    max-height: 932px;
    margin: auto;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(15, 18, 25, .12);
  }
  :root { --nav-bottom: 15px; }
}

.scroller { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
/* Pull to refresh: the feed under the screen's header slides down by --ptr (set from JS) while the
   header stays put; a round spinner shows in the gap. Screens without a header slide as a whole. */
.app { --ptr: 0px; --ptr-turn: 0deg; --ptr-top: 0px; }
.app.ptr-head.ptr-on .scroller > div > header ~ *,
.app:not(.ptr-head).ptr-on .scroller > * { transform: translateY(var(--ptr)); transition: transform 260ms cubic-bezier(.22,.9,.28,1); }
.app.ptr-drag .scroller *, .app.ptr-drag .ptr { transition: none; }
.ptr {
  position: absolute; left: 0; right: 0; top: var(--ptr-top); height: var(--ptr); z-index: 21;
  display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none;
  transition: height 260ms cubic-bezier(.22,.9,.28,1);
}
.ptr-spin {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #b9bcc4; box-shadow: 0 2px 8px rgba(15, 18, 25, .14);
}
.ptr svg { transform: rotate(var(--ptr-turn)); }
.app.ptr-ready .ptr-spin, .app.ptr-busy .ptr-spin { color: #5b4ae8; }
.app.ptr-busy .ptr svg { animation: ptrSpin 800ms linear infinite; }
@keyframes ptrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.overlay-screen { position: absolute; left: 0; right: 0; top: var(--sat); bottom: var(--nav-h); background: #e8eaee; overflow: auto; z-index: 5; }

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--nav-h);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #e8eaef;
  padding: 13px 8px var(--nav-bottom);
  z-index: 10;
}

.modal-scrim {
  position: absolute; inset: 0; background: rgba(15, 18, 25, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

/* Bottom sheets (Your groups, Members): slide up while the scrim fades in, no scale */
.sheet-scrim {
  position: absolute; inset: 0; z-index: 30; background: rgba(15, 18, 25, .45);
  display: flex; align-items: flex-end; animation: fadeIn 240ms ease-out both;
}
.sheet {
  position: relative; width: 100%; background: #fff; border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 18, 25, .2); will-change: transform;
  animation: sheetUp 380ms cubic-bezier(.32, .72, 0, 1) both;
}

/* v6 slide-up sheets (Profile, Notifications, View all, Could use a hand, Search, Will you be there?):
   from a fixed top down to the bottom, over the tab bar */
.v6-scrim {
  position: absolute; inset: 0; z-index: 30; background: rgba(13, 17, 23, .45);
  animation: scrimIn 180ms ease-out both;   /* the colour fades, not the sheet inside it */
}
@keyframes scrimIn { from { background: rgba(13, 17, 23, 0); } }
.v6-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--sheet-top, 64px) + var(--sat));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px 24px 0 0; background: #e8eaee;
  animation: sheetUp 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.v6-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }

/* Your tasks carousels: cards snap, bleeding to the screen edge */
.snap-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 14px; padding: 2px 14px 6px; }
.snap-row > * { scroll-snap-align: start; flex: 0 0 290px; }

/* Photo positioner: rule-of-thirds lines while dragging */
.ph-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 120ms; }
.ph-dragging { cursor: grabbing !important; }
.ph-dragging .ph-grid {
  opacity: 1;
  background-image:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}

.no-scrollbar, .snap-row { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar, .snap-row::-webkit-scrollbar { display: none; }

/* ---- Pseudo-states from the design's style-hover / style-focus ---- */
.hov-primary:hover { background: #4a3ad4 !important; }
.hov-outline:hover { border-color: #5b4ae8 !important; color: #5b4ae8 !important; }
.hov-dash:hover { border-color: #5b4ae8 !important; }
.hov-tint:hover { background: #f3f1fe !important; }
.hov-row:hover { background: #f7f7f9 !important; }
.hov-tint2:hover { background: #e9e5fd !important; }
.hov-grey:hover { border-color: #b9bcc4 !important; }
.hov-fill-grey:hover { background: #f2f3f6 !important; }
.hov-white-line:hover { border-color: #fff !important; }
.hov-danger:hover { background: #fdeef0 !important; }
.hov-grey-fill:hover { background: #eef0f3 !important; }
.fld:focus { border-color: #5b4ae8 !important; }
.fld-danger:focus { border-color: #9b1c31 !important; }

[data-on] { cursor: pointer; }
[data-on]:focus-visible, button:focus-visible { outline: 2px solid #5b4ae8; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Loading screen (index.html), shown until the app's first render replaces it */
.splash {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #fff; font-family: Figtree, system-ui, sans-serif;
}
.splash-bolt { animation: sparkPulse 1.2s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(232, 167, 28, .35)); }
.splash-name { font-size: 24px; font-weight: 900; letter-spacing: -.6px; color: #0d1117; }
@keyframes sparkPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .splash-bolt { animation: none; } }

/* Post an event (v6 Update 3): the name typed on the photo */
.ev-name::placeholder { color: rgba(255, 255, 255, .72); font-weight: 900; }

/* Group pages (Ideas · Plans · Past): the pane slides in on a tab change; quiet edge arrows hint at swiping */
@keyframes paneFromRight { from { opacity: .3; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes paneFromLeft { from { opacity: .3; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.swipe-hint {
  position: absolute; top: 58%; z-index: 4; width: 26px; height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(13, 17, 23, .12); opacity: .75;
}
.swipe-hint-l { left: 0; border-radius: 0 12px 12px 0; animation: nudgeL 3.2s ease-in-out infinite; }
.swipe-hint-r { right: 0; border-radius: 12px 0 0 12px; animation: nudgeR 3.2s ease-in-out infinite; }
.swipe-hint:hover { opacity: 1; }
@keyframes nudgeR { 0%, 70%, 100% { transform: translateX(0); } 78% { transform: translateX(-5px); } 86% { transform: translateX(0); } 92% { transform: translateX(-3px); } }
@keyframes nudgeL { 0%, 70%, 100% { transform: translateX(0); } 78% { transform: translateX(5px); } 86% { transform: translateX(0); } 92% { transform: translateX(3px); } }
/* The page follows a sideways drag (JS); the browser keeps vertical scrolling and pinch-zoom */
[data-tabpane] { touch-action: pan-y pinch-zoom; }
.app.swiping .swipe-hint { opacity: 0; transition: opacity 120ms ease; }