/**
 * Planix shared design system.
 * Loaded by every page, so the base reset and the cross-cutting responsive
 * guarantees belong here. Kept identical in effect to Tailwind's preflight so
 * adding it does not shift pages that already load Tailwind.
 */

/* ===== Base Reset ===== */
/* The only reset source on pages that do not load Tailwind (verify-email).
   Without it those pages stay on content-box, so any width:100% + padding
   container overruns the viewport. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* Long unbroken tokens (emails, URLs, task titles) must be able to break
   instead of forcing horizontal scroll on narrow viewports. */
body,
button,
input,
select,
textarea {
  overflow-wrap: break-word;
}

/* ===== Viewport & Safe Areas ===== */
/* 100dvh tracks the dynamic viewport so full-height surfaces are not clipped
   when mobile browser chrome collapses. 100vh stays as the legacy fallback. */
:root {
  --planix-touch-target: 44px;
  --planix-safe-top: env(safe-area-inset-top, 0px);
  --planix-safe-bottom: env(safe-area-inset-bottom, 0px);
  --planix-safe-left: env(safe-area-inset-left, 0px);
  --planix-safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 767px) {
  html,
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ===== Shared visual polish for Planix surfaces and cards. */
main .bg-white.rounded-2xl.border,
main .bg-white.rounded-xl.border,
main .bg-white.rounded-lg.border {
  border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

main .bg-white.rounded-2xl.border:hover,
main .bg-white.rounded-xl.border:hover,
main .bg-white.rounded-lg.border:hover {
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.075);
}

.dark main .bg-white.rounded-2xl.border,
.dark main .bg-white.rounded-xl.border,
.dark main .bg-white.rounded-lg.border {
  border-color: #334155;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.2);
}

.dark main .bg-white.rounded-2xl.border:hover,
.dark main .bg-white.rounded-xl.border:hover,
.dark main .bg-white.rounded-lg.border:hover {
  border-color: #475569;
}