/* Treatly — layout chrome (wordmark uses Manrope from treatly.css) */

.wordmark-pro-tag {
  font-family: Manrope, sans-serif;
  font-style: normal;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

#loading .brand-word {
  color: #1c1917;
}
.auth-logo .brand-word {
  color: var(--brand);
}

/* Ink primary — selective CTAs (not global --brand) */
:root {
  --btn-ink: #1c1917;
  --btn-ink-hover: #2e2a26;
  --btn-ink-rgb: 28, 25, 23;
}

.care-alert-action,
body.tab-home .circle-alert .care-alert-action,
.friend-act-btn--primary,
.home-mood-bar.needs-log .home-mood-bar-go {
  background: var(--btn-ink) !important;
  border-color: var(--btn-ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(var(--btn-ink-rgb), 0.12) !important;
}
.care-alert-action:active,
.friend-act-btn--primary:active {
  background: var(--btn-ink-hover) !important;
}

/* Capacitor uses the same --app-safe-top / --hdr-chrome-inset as web (see treatly.css).
   Do not zero safe-top while #app also pads — that pins the header under the status bar. */
body.app-chrome {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --safe-top: var(--app-safe-top, env(safe-area-inset-top, 0px));
}
body.capacitor-native #home-story-bar,
body.capacitor-native .home-friend-strip-slot {
  position: relative;
  z-index: 2;
}

/* Home header: keep actions pinned to the right on mobile */
body.tab-home .hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  min-height: 52px;
}
body.tab-home #hdr-brand {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px !important;
}
body.tab-home .hdr-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
body.tab-home .hdr-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  position: static !important;
  inset: auto !important;
  margin-left: auto !important;
}
body.tab-home #bell {
  order: 1;
}
body.tab-home #hdr-treat-hearts {
  order: 2;
}
body.tab-home #hdr-menu-btn {
  order: 3;
}
body.tab-home #av-btn {
  order: 3;
  flex-shrink: 0;
}

/* Bottom nav — icons only; regular tabs centered, Add FAB floats up */
.nav.nav--product {
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
.nav--product {
  align-items: center !important;
  padding-top: 0 !important;
}
.nav--product .ni {
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 2px 6px !important;
  min-height: 56px;
}
.nav--product .ni-inner {
  justify-content: center;
  align-items: center;
  min-height: 0;
  gap: 0;
}
.nav--product .nil {
  display: none !important;
}
.nav--product .nic {
  width: 26px;
  height: 26px;
}
.nav--product .nic .nic-stroke {
  stroke-width: 1.85;
}

/* Add — raised circle, ink fill */
.nav--product .ni-add,
.ni-add {
  overflow: visible !important;
}
.nav--product .ni-add .ni-add-ring,
.ni-add .ni-add-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  padding: 0;
  transform: translateY(-10px);
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--btn-ink) !important;
  box-shadow: 0 4px 16px rgba(var(--btn-ink-rgb), 0.2) !important;
}
.nav--product .ni-add .nic,
.ni-add .nic {
  width: 24px;
  height: 24px;
  color: #fff;
}
.nav--product .ni-add .nic .nic-stroke,
.ni-add .nic .nic-stroke {
  stroke: #fff;
  stroke-width: 2.5;
}
[data-theme="dark"] .nav--product .ni-add .ni-add-ring,
[data-theme="dark"] .ni-add .ni-add-ring {
  background: #f5f2ec !important;
  border-color: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .nav--product .ni-add .nic,
[data-theme="dark"] .ni-add .nic {
  color: var(--btn-ink);
}
[data-theme="dark"] .nav--product .ni-add .nic .nic-stroke,
[data-theme="dark"] .ni-add .nic .nic-stroke {
  stroke: var(--btn-ink);
}