/* ---------------------------------------------------------------------------
   code.inferise.com

   Shares the inferise.com design system: the tokens live in js/tailwindconfig.js
   and this file supplements them. The first half is carried over from
   prod/css/tailwind_custom.css so the two sites stay visually identical; the
   half below "Product page" is specific to Inferise Code.
   --------------------------------------------------------------------------- */

/* Hide Alpine.js elements until initialized */
[x-cloak] { display: none !important; }

body {
    background-color: rgb(5, 5, 5);
    color: white;
}

.glass-panel {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-glow {
    text-shadow: 0 0 20px rgba(255, 112, 52, 0.4);
}

/* Base element overrides: higher specificity (body h3) beats Tailwind CDN's
   Preflight (h3). Headings inside <main> opt out with class="reset". */
p {
    padding: 0.75rem 0 0.75rem 0;
}

body h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    padding: 1.5rem 0 1.5rem 0;
}

body h2 {
    padding: 2rem 0 2rem 0;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2rem;
}

/* :where() contributes no specificity, so these rules cancel the bare-element
   padding above without ever outranking a Tailwind utility. Written plainly as
   `main p.reset` (as prod/ has it) they score 0-1-2 and silently beat .pb-6 on
   the same element -- which is a trap, because pairing `reset` with a padding
   class is the obvious thing to write. */
main :where(h1.reset),
main :where(h2.reset),
main :where(h3.reset),
main :where(p.reset) { padding: 0; }

.font-mono-ibm { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

@keyframes terminal-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cursor-blink { animation: terminal-blink 1s step-end infinite; }

.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
}

.section-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.section-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Product page
   --------------------------------------------------------------------------- */

/* The six Project Status Ribbon severity tiers, most urgent first. These are the
   app's real colors, converted from the Color(red:green:blue:) literals in
   Code/ProjectSeverityService.swift. Keep them in sync with the app: a visitor
   who downloads should recognise the chips they just saw. */
.sev-waiting     { background-color: #9E171C; }
.sev-needs-input { background-color: #BF3821; }
.sev-permission  { background-color: #CC7A1A; }
.sev-working     { background-color: #2E5C9E; }
.sev-idle        { background-color: #296B2E; }
.sev-neglected   { background-color: #576157; }

/* A ribbon chip. 68pt colored square with the project name outside it, matching
   the app's geometry closely enough to be recognisable at a glance. */
.chip {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 0.5rem;
    position: relative;
    transition: transform 0.2s ease;
}
.chip-group:hover .chip { transform: translateY(-3px); }

/* The selected chip grows a triangular notch out of its top edge, in its own
   color -- the app's way of tying a chip to the editor above it. */
.chip-selected::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 7px solid currentColor;
}

/* Screenshot frames. Fixed aspect ratios so a re-shot capture drops in without
   reflowing the page around it. */
.shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.shot-frame {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}

/* Placeholder standing in for a capture that isn't taken yet. Sized by an
   aspect-ratio on the element so swapping in the real PNG changes nothing. */
.shot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.02) 0 12px,
            rgba(255,255,255,0.04) 12px 24px
        ),
        rgb(10, 10, 10);
    color: rgba(255,255,255,0.35);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Keyboard shortcut key */
kbd {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: rgb(209, 213, 219);
    white-space: nowrap;
}

/* FAQ disclosure chevron */
.faq-chevron { transition: transform 0.2s ease; }
.faq-open .faq-chevron { transform: rotate(180deg); }