/* ==========================================================================
   YummyPenny — shared UI layer (v3): toast notifications + mobile masthead
   Loaded on every page from base.html. Every color reads a CSS variable
   from app.css / dark.css, so toasts match whichever theme is active
   without any dark-mode rules of their own.
   ========================================================================== */

.toasts {
  position: fixed;
  z-index: 200;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  max-width: min(92vw, 380px);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--save);
  border-radius: 12px;
  padding: 11px 12px 11px 14px;
  box-shadow: var(--shadow);
  font-family: var(--body);
  font-size: .9rem;
  line-height: 1.4;
  animation: toast-in .22s ease;
}

.toast-error { border-left-color: var(--danger); }
.toast-ok    { border-left-color: var(--save); }

.toast-msg { flex: 1 1 auto; min-width: 0; }

.toast-act {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--save-ink);
  background: var(--save-soft);
  border: 1px solid var(--save-line);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, filter .15s;
}
.toast-act:hover { transform: translateY(-1px); filter: brightness(1.05); }
.toast-error .toast-act {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(196, 52, 30, .3);
}

.toast-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.toast-x:hover { color: var(--ink); }

.toast-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-out { transition: none; }
}

/* ==========================================================================
   v2 — mobile masthead
   Below 700px the header stops relying on flex-wrap luck (which made the
   layout differ between visits/themes) and takes a deliberate app shape:
   row 1 = brand with the theme toggle pinned right, row 2 = one horizontal,
   swipeable nav row. Links never wrap mid-name ("Penny Finds" stays whole).
   Loads after app.css, so these override its mobile rules.
   ========================================================================== */
@media (max-width: 700px) {
  .masthead-in {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .brand { padding-right: 52px; }         /* keeps clear of the pinned toggle */
  .theme-toggle {
    position: absolute;
    top: 9px;
    right: 14px;
  }
  .masthead-nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .masthead-nav::-webkit-scrollbar { display: none; }
  .masthead-nav a { white-space: nowrap; }
  .masthead-nav .btn { padding: 8px 14px; flex-shrink: 0; }
}

/* v3 — account page: renewal date beside the membership badge */
.acct-renews { color: var(--faint); font-size: .82rem; margin-left: 8px; white-space: nowrap; }