/*
 * The page's own base, read verbatim from the prototype (frontend/App.dc.html,
 * line 16) and from its loading state (frontend/States.dc.html, line 10).
 *
 * The design-system bundle sets none of this: it ships only the utilities its
 * own components ask for, not `html,body`. Without this file the app rendered
 * at the browser default — 16px, black text — everywhere a component did not
 * name its own size and colour, which is most of the plain text in the
 * product.
 *
 * Every element rule below is wrapped in `@layer base`, the same named layer
 * the bundle's own reset already occupies (it is `@layer base{...}` in
 * `_ds_bundle.css`, ahead of its `@layer utilities`). Cascade layer order is
 * fixed by which layer name is registered first across every stylesheet on
 * the page, not by link order, so joining that same layer — rather than
 * leaving these rules unlayered, which would make them win outright — is
 * what keeps every compiled utility class able to override them: an
 * unlayered `a{color:#2563eb}` outranked `text-brand-secondary` on every
 * sidebar link, an unlayered `input:focus{outline:...}` beat `outline-hidden`,
 * and an unlayered `button{cursor:pointer}` beat `disabled:cursor-not-allowed`.
 */
@layer base {
  html,
  body {
    margin: 0;
    height: 100%;
    background: #fafafa;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #171717;
    -webkit-font-smoothing: antialiased;
  }

  /*
   * `font-size` on `body` only, not `html`, even though the prototype's own
   * rule is `html,body{...font-size:14px}`: every compiled Flora/Tailwind
   * utility here is defined in `rem` (`--spacing:.25rem`, in the bundle), and
   * `rem` is always relative to the root element's font-size specifically —
   * `body`'s does not enter into it. Setting `html` to 14px would not just
   * fix unstyled text; it would scale every `p-*`, `rounded-*`, `text-*` and
   * `gap-*` utility in the whole design system to 14/16 of the size it was
   * authored at, silently, everywhere at once. `body`'s own font-size still
   * inherits down to any element that does not set its own — which is the
   * actual bug this line fixes (a file name with no size class rendering at
   * 16px instead of 14px).
   */
  body {
    font-size: 14px;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  a {
    color: #2563eb;
    text-decoration: none;
  }

  a:hover {
    color: #1d4ed8;
  }

  button,
  input,
  textarea,
  select {
    font-family: inherit;
  }

  button {
    cursor: pointer;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 8px;
  }
}

@keyframes ptwSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ptwPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes ptwIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* frontend/States.dc.html, line 10 (S6 loading placeholder). */
@keyframes ptwShimmer {
  0% {
    background-position: -300px 0;
  }
  100% {
    background-position: 300px 0;
  }
}

/* Small helper classes for the few places an inline `style` cannot reach: a
   named `@keyframes` has to be selected through a class, not a style object.
   Left unlayered on purpose — nothing in the design system defines a
   `.ptw-*` class, so there is no utility for one of these to lose to. */
.ptw-spin {
  animation: ptwSpin 0.8s linear infinite;
}

.ptw-shimmer {
  background-image: linear-gradient(90deg, #f0f0f0 25%, #fafafa 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: ptwShimmer 1.4s infinite;
}

/* Button hover (`ui/Button.tsx`): `:not(:disabled)` so a disabled button
   never lights up under the cursor — it would be promising something it will
   not do. Toast entrance (frontend/App.dc.html:679): its own duration,
   distinct from the dialog's `.ptw-modal` (components/ui/modal.css). */
.ptw-btn {
  background: var(--ptw-btn-bg);
}

.ptw-btn:hover:not(:disabled) {
  background: var(--ptw-btn-hover-bg);
}

/* Checkbox (`ui/Checkbox.tsx`): the native input is visually hidden, so its
   keyboard focus is shown on the drawn box that follows it. */
.ptw-checkbox:focus-visible + span {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.ptw-toast {
  animation: ptwIn 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ptw-spin,
  .ptw-shimmer,
  .ptw-toast {
    animation: none;
  }
}