/* css/polish.css — keyframes + utility classes for M5 polish. */

/* <details>/<summary> disclosure: hide the native triangle marker (we render our
   own ".disclose-chev" chevron that rotates open). Applies app-wide. */
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
.disclose-chev { display: inline-block; transition: transform var(--motion-fast, 120ms) var(--ease-standard); }
details[open] > summary .disclose-chev { transform: rotate(90deg); }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Modal overlay + body */
.anim-fade-in   { animation: fade-in   var(--motion-base) var(--ease-entry) both; }
.anim-scale-in  { animation: scale-in  var(--motion-base) var(--ease-entry) both; }
.anim-slide-in-right { animation: slide-in-right var(--motion-slow) var(--ease-entry) both; }
.anim-slide-in-left  { animation: slide-in-left  var(--motion-slow) var(--ease-entry) both; }
.anim-pop       { animation: pop       var(--motion-base) var(--ease-standard); }

/* Subtle button press */
.btn-press {
  transition: transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard),
              opacity   var(--motion-fast) var(--ease-standard);
}
.btn-press:active {
  transform: scale(0.97);
}

/* Card hover lift */
.card-hover {
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* Smooth all color/background transitions on interactive elements */
button, a, input, textarea, select, [role="button"] {
  transition-property: background-color, border-color, color, fill, stroke, opacity;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-standard);
}

/* Refined elevation utilities — use the token-defined shadow ladder instead of
   Tailwind's flat single-axis defaults. The two-layer offsets read more like
   real depth than `shadow-sm`'s flat 1px drop. */
.shadow-card  { box-shadow: var(--shadow-1); }
.shadow-card-2 { box-shadow: var(--shadow-2); }
.shadow-modal { box-shadow: var(--shadow-3); }

/* Swipe-to-complete (My Tasks, mobile): the foreground glides over the action
   layer. Transition is removed inline during finger-tracking and restored for
   the snap/commit; reduced-motion users always snap instantly. */
.swipe-fg { transition: transform var(--motion-base) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .swipe-fg { transition: none; }
}

/* iOS zooms the viewport when a focused field's font-size is < 16px. Force 16px
   on ALL text fields at phone widths so focusing any input/textarea/select never
   triggers that jarring auto-zoom. `!important` is required because Tailwind's
   utility classes (e.g. `.text-sm` on the description textarea) are class-level
   selectors that otherwise win the cascade over a plain element rule. Desktop
   sizing is unchanged. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   Shell (relaunch): fixed bottom tab bar on phones. The tab bar pads itself
   for the home indicator; page content gets matching bottom room so nothing
   hides behind it. Desktop has no tab bar, so normal bottom padding. */
.shell-tabbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-shadow: 0 -1px 8px rgba(15, 23, 42, 0.04);
}
/* viewport-fit=cover (needed for the home-indicator inset above) also lets a
   landscape iPhone draw under the notch; keep in-flow content clear of it. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.shell-main {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .shell-main { padding-bottom: 2rem; }
}