/*
  Global reset + the handful of things Tailwind's utility classes
  don't cover well (see the comment in base.html). Everything else in
  the app -- including, as of this pass, the entire curator admin
  panel -- is styled with Tailwind utility classes directly in the
  templates, so this file is intentionally small.
*/

* {
    box-sizing: border-box;
}

img, svg {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
    font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: #fafaf9; /* stone-50 -- matches Tailwind's palette so there's no
                             color mismatch during the moment before the CDN
                             script has downloaded and generated its stylesheet */
    color: #1c1917; /* stone-900 */
}

button {
    font-family: inherit;
    cursor: pointer;
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* htmx loading-indicator boilerplate (Phase 28): htmx toggles the
   `htmx-request` class on the element that triggered a request (or on
   whatever `hx-indicator` points at) for the duration of that
   request. Any element with the .htmx-indicator class starts hidden
   and is only shown while that class is present -- this is standard
   htmx boilerplate CSS, not something a static Tailwind utility class
   can express, since it depends on a class htmx adds/removes at
   runtime rather than anything present in the initial markup. Used by
   the small search-loading spinners in artifacts.html/codes.html. */
.htmx-indicator {
    opacity: 0;
    transition: opacity 150ms ease-in;
}
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
    opacity: 1;
}

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

/* Visitor chat widget (chat.html) message list. A small, bespoke,
   JS-driven component -- chat.html's inline <script> streams message
   bubbles in and toggles their own Tailwind utility classes for
   color/alignment, so this only supplies the couple of structural
   rules (scrollable log height, bubble text wrapping) that aren't
   naturally expressed as utilities. */

.chat-log {
    height: 60vh;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-message {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* The one deliberate entrance moment on the whole site: the wall-label
   card in the marketing homepage hero settles into place on load, like
   a placard being set down next to an object. Everywhere else on the
   site is still by design -- see the redesign's own principle that a
   single orchestrated moment reads better than motion sprinkled across
   every section. */
.wall-label-enter {
    animation: wall-label-settle 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes wall-label-settle {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wall-label-enter {
        animation: none;
    }
}