/*
 * custom.css — minimal overrides only.
 * All component styles live in tailwind-input.css (@layer components).
 * Reserved for third-party library theming that can't go through tokens.
 */

/* Highlight.js light mode baseline */
pre.hljs, code.hljs {
    background: var(--c-surface-subtle);
    color: var(--c-text);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
}

/* htmx loading indicator hook */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Alpine x-cloak helper */
[x-cloak] {
    display: none !important;
}

/* Nav logo: hide alt text and fade in once the image is ready */
.nav-brand img {
    color: transparent;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.nav-brand img.nav-logo-loaded {
    opacity: 1;
}

/* Mobile nav language chips */
.mobile-lang-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--c-surface-raised);
    color: var(--c-nav-text-muted);
    border: 1px solid var(--c-border);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.mobile-lang-chip:hover {
    background: var(--c-nav-hover);
    color: var(--c-nav-text);
}

.mobile-lang-chip.is-active {
    background: var(--c-primary-muted);
    color: var(--c-primary);
    border-color: var(--c-primary);
    font-weight: 700;
}

/* Upload page: allow the security fieldset badge to wrap onto a new line on narrow screens */
@media (max-width: 639px) {
    .fieldset-title {
        flex-wrap: wrap;
    }

    .fieldset-title .badge {
        margin-left: 1.5rem;
    }
}

/* Stat hero on narrow screens: shrink the value so it doesn't overflow a 2-col card,
   and tighten the padding — four tiles at 1.5rem padding pushed the real content on
   admin pages well below the fold on a phone. */
@media (max-width: 639px) {
    .stat-hero-value {
        font-size: clamp(1.25rem, 7vw, 2rem);
    }

    .stat-hero {
        padding: 0.875rem 1rem;
        gap: 0.125rem;
    }
}

/* ── EasyMDE / CodeMirror theming (pastebin editor) ─────────────────────
   Third-party widget internals, so it belongs here rather than in the component
   layer. Moved out of an inline <style> block in pastebin.html. */
.editor-wrapper .CodeMirror {
    min-height: 22rem;
    height: auto;
    border-radius: 0 0 1rem 1rem;
    border: 1px solid var(--c-border-strong);
    border-top: none;
    background-color: var(--c-surface);
    color: var(--c-text);
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

.editor-wrapper .editor-preview,
.editor-wrapper .editor-preview-side {
    font-size: 1rem;
    line-height: 1.6;
    background-color: var(--c-surface);
    color: var(--c-text);
}

.editor-wrapper .CodeMirror-cursor {
    border-left-color: var(--c-text);
}

/* Shaped like the editor it replaces: joined to the toolbar above, rounded only at
   the bottom. A fully rounded box reads as a panel floating inside the editor. */
.editor-wrapper .manual-preview-pane {
    display: none;
    max-height: 72vh;
    overflow: auto;
    border: 1px solid var(--c-border-strong);
    border-top: none;
    border-radius: 0 0 1rem 1rem;
    background-color: var(--c-surface);
    padding: 1.5rem;
    color: var(--c-text);
}

.paste-editor .manual-preview-pane {
    border-radius: 0 0 0.75rem 0.75rem;
}

/* EasyMDE ships `.EasyMDEContainer .CodeMirror` with its own 1px border and 4px bottom
   corners. That selector has the same specificity as `.editor-wrapper .CodeMirror` above
   and its stylesheet loads later, so it was winning the tie: the editor rendered detached
   from the toolbar with corners that matched neither it nor the preview. One extra class
   takes the tie back. */
.editor-wrapper .EasyMDEContainer .CodeMirror {
    border: 1px solid var(--c-border-strong);
    border-top: none;
    border-radius: 0 0 1rem 1rem;
}

.paste-editor .EasyMDEContainer .CodeMirror {
    border-radius: 0 0 0.75rem 0.75rem;
}

.editor-wrapper.manual-preview-active .manual-preview-pane {
    display: block;
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* The container keeps its box (toolbar lives outside it) but must stop claiming the
   free space, or the preview pane renders as a short box at the very bottom. */
.editor-wrapper.manual-preview-active .EasyMDEContainer {
    flex: 0 0 auto;
}

.editor-wrapper.manual-preview-active .EasyMDEContainer .CodeMirror,
.editor-wrapper.manual-preview-active .EasyMDEContainer .editor-statusbar {
    display: none !important;
}

.custom-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    border: 1px solid var(--c-border-strong);
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
    padding: 0.625rem 0.875rem;
    background-color: var(--c-surface-raised);
}

.custom-editor-toolbar button {
    border: 1px solid var(--c-border-strong);
    border-radius: 0.5rem;
    background-color: var(--c-surface);
    color: var(--c-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.375rem 0.5rem;
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-editor-toolbar button svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.custom-editor-toolbar button:hover {
    background-color: var(--c-primary-muted);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.custom-editor-toolbar button[aria-pressed="true"] {
    background-color: var(--c-primary-muted);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.preview-tool-button {
    margin-left: auto;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
}


/* ── Paste editor fill (editor-first shell) ─────────────────────────────
   These must live here, not in @layer components: easymde.min.css and this
   file are unlayered, and unlayered CSS beats any layered rule regardless of
   specificity — the layered versions of these silently lost. */
.paste-editor .EasyMDEContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.paste-editor .CodeMirror {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* One scrolling row instead of wrapping onto two (~90px on a phone). */
.paste-editor .custom-editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;
    border-radius: 0.75rem 0.75rem 0 0;
}

.paste-editor .custom-editor-toolbar button {
    flex-shrink: 0;
}

.paste-editor .editor-statusbar {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
}


/* ── View Transitions for partial navigation ────────────────────────────
   ::view-transition-* are document-level pseudo-elements, so they cannot live
   inside @layer components. Triggered by QD.loadDynamic when the browser
   supports startViewTransition(). */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}