/* Tailwind is loaded via CDN for the MVP; this file only holds the handful of rules
   Tailwind's CDN build can't express (the htmx loading-indicator convention, and basic
   prose styling for rendered Markdown, since Tailwind's reset strips default heading/
   list/hr styles and the CDN build has no typography plugin).

   Every colour here goes through the theme tokens defined in
   partials/runiq-theme.head.html, never a literal — a hardcoded value in this file
   stays light while the rest of the page turns dark, and nothing in a light-mode
   review would reveal it. Note the code/pre background uses `surface`, which sits
   *below* `card` in light and *above* it in dark; both read as a distinct block
   against the reply bubble, which is what the rule is for. */

.markdown-body :is(h1, h2, h3, h4) {
    font-weight: 600;
    margin: 0.75em 0 0.35em;
}
.markdown-body h1 { font-size: 1.25rem; }
.markdown-body h2 { font-size: 1.15rem; }
.markdown-body :is(h3, h4) { font-size: 1rem; }
.markdown-body :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.markdown-body p { margin: 0.5em 0; }
.markdown-body p:first-child { margin-top: 0; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body :is(ul, ol) {
    margin: 0.5em 0;
    padding-left: 1.4em;
}
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body li { margin: 0.15em 0; }
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body hr {
    border: none;
    border-top: 1px solid rgb(var(--c-line));
    margin: 0.75em 0;
}
.markdown-body code {
    background: rgb(var(--c-surface));
    border-radius: 0.25em;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}
.markdown-body pre {
    background: rgb(var(--c-surface));
    border-radius: 0.375em;
    padding: 0.6em 0.75em;
    overflow-x: auto;
    margin: 0.5em 0;
}
.markdown-body pre code {
    background: none;
    padding: 0;
}
.markdown-body a {
    color: rgb(var(--c-ink));
    text-decoration: underline;
}

/* Form controls carry no `bg-` class in the templates, so without this they fall back
   to the user agent's own styling. Under `color-scheme: dark` Chrome paints them a warm
   grey that clashes with the navy palette — and the exact shade differs per browser, so
   the inconsistency wouldn't even be reproducible. Set as an element rule rather than a
   Tailwind class so a future input can't be missed.

   The autofill rule matters most on the login page: Chrome overrides the background of
   an autofilled field with its own near-white, which puts light text on light in dark
   mode. The 1000px inset shadow is the only way to override it. */
input:where([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"], :not([type])),
textarea,
select {
    background-color: rgb(var(--c-card));
    color: rgb(var(--c-ink));
}
input::placeholder,
textarea::placeholder {
    color: rgb(var(--c-ink-soft));
    opacity: 1; /* Firefox dims placeholders by default, on top of the colour */
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(var(--c-ink));
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--c-card)) inset;
    caret-color: rgb(var(--c-ink));
}

/* Brief flash on a message when navigated to from the history sidebar (see
   scrollToMessage in app.js), so the athlete can see where they landed. */
@keyframes history-highlight-flash {
    0%, 100% { background-color: transparent; }
    25% { background-color: rgb(var(--c-accent) / 0.18); }
}
.history-highlight {
    animation: history-highlight-flash 1.4s ease-out;
    border-radius: 0.5rem;
}

/* Hidden by default; htmx toggles the `htmx-request` class on the requesting element
   (and its indicator target) for the duration of the request. */
.htmx-indicator {
    opacity: 0;
    transition: opacity 150ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}