/* App shell shared by all pages: feels like a native app on phones, same trashy look. */

html {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;            /* no double-tap zoom */
  overscroll-behavior-y: none;           /* no rubber band / native pull-to-refresh */
  -webkit-text-size-adjust: 100%;
}
body { overscroll-behavior-y: none; }
html.standalone body { padding-top: calc(env(safe-area-inset-top) + 8px); }

/* UI chrome is not selectable text */
button, .btn, nav, summary, .row, .chip, .tabs, .app-tabbar, .appbar, .host-tag, label {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }

/* phones never zoom into focused fields: iOS zooms when font-size < 16px */
@media (max-width: 800px) {
  input, select, textarea { font-size: 16px !important; }
}

/* press feedback */
button, .btn, .row, .jump a, .app-tab { transition: transform .12s ease, filter .12s ease; }
.pressed { transform: scale(.97); filter: brightness(.95); }
.btn.pressed { transform: scale(.97) translate(1px, 1px); }

/* ---------- toast ---------- */
.app-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 1000;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 520px); padding: 12px 18px; font: 700 15px var(--comic, "Comic Neue", sans-serif);
  background: #000; color: #0f0; border: 3px solid #ff0; box-shadow: 4px 4px 0 #f0f; border-radius: 6px;
  transition: transform .25s cubic-bezier(.2, 1.3, .4, 1), opacity .2s ease;
}
.app-toast.err { color: #fff; background: #c00; border-color: #000; }
.app-toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 801px) { .app-toast { bottom: 28px; } }

/* ---------- top progress bar ---------- */
#app-progress {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; height: 4px; z-index: 1001; overflow: hidden;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
#app-progress.on { opacity: 1; }
#app-progress::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: repeating-linear-gradient(90deg, #f0f 0 20px, #ff0 20px 40px, #0ff 40px 60px);
  animation: appProgress 1s ease-in-out infinite;
}
@keyframes appProgress { from { left: -40%; } to { left: 100%; } }

/* ---------- pull to refresh ---------- */
#app-ptr {
  position: fixed; top: calc(env(safe-area-inset-top) - 36px); left: 50%; z-index: 999; opacity: 0;
  width: 40px; height: 40px; border-radius: 50%; background: #ff0; border: 3px solid #000; box-shadow: 3px 3px 0 #f0f;
  transform: translate(-50%, 0); display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#app-ptr .ptr-spin { width: 18px; height: 18px; border: 3px solid #00f; border-top-color: transparent; border-radius: 50%; }
#app-ptr.ready { background: #0f0; }
#app-ptr.spinning .ptr-spin { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ---------- dialogs: pop on desktop, bottom sheet on phones ---------- */
dialog[open]:not(.lightbox) { animation: dlgPop .18s cubic-bezier(.2, 1.2, .4, 1); }
dialog.closing:not(.lightbox) { animation: dlgOut .19s ease forwards; }
dialog[open]::backdrop { animation: dlgFade .2s ease; }
@keyframes dlgPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dlgOut { to { transform: scale(.96); opacity: 0; } }
@keyframes dlgFade { from { opacity: 0; } }

@media (max-width: 800px) {
  dialog:not(.lightbox) {
    box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin: auto 0 0 !important;
    max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 18px) !important; padding-top: 26px !important;
    box-shadow: 0 -6px 0 #f0f !important;
  }
  dialog:not(.lightbox)::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px;
    border-radius: 3px; background: #bbb;
  }
  dialog[open]:not(.lightbox) { animation: sheetUp .3s cubic-bezier(.2, .9, .3, 1); }
  dialog.closing:not(.lightbox) { animation: sheetDown .19s ease-in forwards; }
  dialog:not(.lightbox) { transition: transform .2s ease; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown { to { transform: translateY(100%); } }

/* app confirm */
.app-confirm { max-width: 420px; border: 5px ridge #f0f; box-shadow: 8px 8px 0 #00f; padding: 18px; font-family: var(--comic, "Comic Neue", sans-serif); }
.app-confirm-text { font-size: 17px; font-weight: 700; margin: 0 0 16px; white-space: pre-line; }
.app-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.app-confirm-actions .btn { width: auto; margin: 0; }
.app-confirm-actions .btn.danger { background: #ff6b6b; border-color: #c00; color: #fff; }
@media (max-width: 800px) {
  .app-confirm-actions { flex-direction: column-reverse; }
  .app-confirm-actions .btn { width: 100%; padding: 14px; font-size: 17px; }
}

/* ---------- bottom tab bar (phones) ---------- */
.app-tabbar { display: none; }
@media (max-width: 800px) {
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
    background: #fff; border-top: 4px solid #000; box-shadow: 0 -4px 0 #f0f;
    padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px);
  }
  .app-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px;
    background: none; border: 0; border-radius: 10px; color: #333; text-decoration: none; cursor: pointer;
    font: 700 12.5px/1.1 var(--comic, "Comic Neue", sans-serif); letter-spacing: .1px;
  }
  .app-tab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .app-tab.active { color: #d000d0; background: #ffe6ff; }
  .app-tab.active svg { transform: translateY(-1px) scale(1.08); transition: transform .2s ease; }
  body.has-tabbar { padding-bottom: calc(env(safe-area-inset-bottom) + 78px); }
}

/* tab / section switch animation */
.view-enter { animation: viewIn .26s cubic-bezier(.2, .9, .3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}