/* v1.28 Feinh Pro as an app: the "Install Feinh Pro" card on phones and the push card in Notification settings
   (public/js/fp-pwa.js). Tokens only. */

.fpi {
  position: fixed; inset-inline: var(--space-3); inset-block-end: calc(var(--phone-tabbar-h) + var(--space-3) + env(safe-area-inset-bottom));
  z-index: var(--z-toast); display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--elevation-3);
  transform: translateY(var(--space-4)); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.fpi.on { transform: none; opacity: 1; }
.fpi[hidden] { display: none; }
.fpi-ic { inline-size: var(--space-12); block-size: var(--space-12); border-radius: var(--radius-inner); display: block; }
.fpi-h { margin: 0; font-size: var(--text-section-size); line-height: var(--text-section-lh); font-weight: 600; }
.fpi-s { margin: var(--space-1) 0 0; font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); }
.fpi-s svg { inline-size: var(--icon-sm); block-size: var(--icon-sm); vertical-align: text-bottom; color: var(--text-link); }
.fpi-do { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fpi-do .fp-btn { min-block-size: var(--control-touch); }
.fpi-x {
  inline-size: var(--control-touch); block-size: var(--control-touch); margin: calc(var(--space-3) * -1); margin-inline-start: 0;
  display: grid; place-items: center; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer;
  font-size: var(--text-title-size); line-height: var(--text-title-lh);
}
.fpi-x:hover { background: var(--surface-subtle); color: var(--text-primary); }
.fpi-x:focus-visible, .fpi .fp-btn:focus-visible { outline: var(--border-w-strong) solid var(--border-focus); outline-offset: var(--space-half); }
/* desktop: never shown (the script only offers it on phones); a wide tablet in a phone layout keeps it narrow */
@media (min-width: 761px) { .fpi { inset-inline: auto var(--space-5); inline-size: min(var(--today-side-w), calc(100vw - var(--space-10))); inset-block-end: var(--space-5); } }
/* a reminder card or a sheet open: the install card waits underneath */
body:has(.fp-sheet-layer:not([hidden])) .fpi, body:has(.fp-modal-layer:not([hidden])) .fpi { display: none; }
@media (prefers-reduced-motion: reduce) { .fpi { transition: none; } }

/* Notification settings: the push card */
.fpp-state { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); }
.fpp-dot { display: inline-block; vertical-align: middle; inline-size: var(--space-2); block-size: var(--space-2); margin-inline-end: var(--space-2); border-radius: var(--radius-full); background: var(--border-control); flex: none; }
.fpp-dot.is-on { background: var(--text-link); }
.fpp-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-3) 0; }
.fpp-note { margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-inner); background: var(--surface-sunken);
  font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-secondary); }
.fpp-note b { color: var(--text-primary); }
.fpp-err { margin: var(--space-2) 0 0; font-size: var(--text-table-size); line-height: var(--text-table-lh); color: var(--text-primary); }
.fpi.no-tab { inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom)); }