/* ==========================================================================
   shared/ui.css — the primitives Ledger and Pantry both draw.

   Buttons, toasts, the bottom dock, skeleton shimmer, focus rings. These were
   copied line-for-line between finance/app.css and pantry/app.css and had
   started to drift (button padding, toast shadows), which is exactly how the
   two pages stop feeling like one household's software.

   EVERYTHING HERE IS WRITTEN AGAINST TOKENS. This file names no colours and
   no page-specific geometry; each app's own stylesheet defines the values
   (Ledger is dark-first, Pantry light-first — the values must stay per-app).
   Tokens this file expects, beyond the app's palette
   (--surface-2/3, --line-strong, --text, --danger, --focus, --tap,
   --radius-sm, --safe-*):

     --accent       the app's action colour (Ledger: the bucket teal;
                    Pantry: the house green)
     --on-accent    text drawn ON the accent (dark ink on Ledger's dark-mode
                    teal, white otherwise)
     --shadow       the toast/dock drop shadow colour
     --dock-bottom  how high the dock floats (Ledger clears a tab bar,
                    Pantry only the home indicator)

   Load order: this file FIRST, then the app's stylesheet — so the app can
   override the deltas it actually wants (Pantry's tighter button padding)
   instead of forking the whole block.
   ========================================================================== */

/* --- focus ring — one ring, both apps, every input method ----------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); min-width: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-weight: 600;
  touch-action: manipulation; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.btn:active { background: var(--surface-3); transform: translateY(1px); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent, #fff); font-weight: 700;
}
.btn-primary:active { filter: brightness(.92); }

/* "Small" is horizontal only. Height stays at the 44pt minimum — there is no
   hover on a phone, and a 36px target is a missed tap. */
.btn-sm { min-height: var(--tap); padding: 0 12px; font-size: 13.5px; }

/* --- bottom dock + toasts ------------------------------------------------- */

/* One bottom stack for everything that docks near the thumb. pointer-events:
   none on the dock means the empty space around its children stays tappable —
   that's what keeps it non-modal. */
.dock {
  position: fixed; z-index: 55;
  left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px);
  bottom: var(--dock-bottom);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.dock-stack { display: flex; flex-direction: column; gap: 8px; }
.dock-stack:empty { display: none; }

.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 26px var(--shadow, rgba(0, 0, 0, .3));
  font-size: 13.5px; font-weight: 600;
  pointer-events: auto;
  animation: rise .18s ease-out;
}
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast .btn { flex: none; }
.toast-error { border-color: var(--danger); }
.toast-error .toast-msg { color: var(--danger); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* --- skeleton shimmer ----------------------------------------------------- */

.skel {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }