/* HBG project-specific overrides. Tailwind handles the bulk via CDN
   in header.php; this file is for things Tailwind utility classes
   can't express cleanly. Keep it small. */

/* Site background — a fixed photo overlaid with a dark green wash so
   the existing green-950/-900 panels still read with strong contrast.
   The wash uses a near-opaque green-950 colour at the edges, fading
   to slightly more transparent in the centre, so the photo is always
   present but never competes with foreground text.
   Background lives on body::before so all content (including modals
   and dialogs) sits above it. */
body {
    position: relative;
    /* Fallback solid colour in case the image fails to load. */
    background-color: #052e16;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(2, 21, 12, 0.82), rgba(2, 21, 12, 0.92)),
        url("../media/bg_1.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Header + main panels are already coloured; nudge the header to be
   slightly translucent so the photo bleeds through subtly. */
header.bg-green-900 {
    background-color: rgba(20, 83, 45, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.locus-allele {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    padding: 0 0.25em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border-radius: 3px;
}
.locus-allele.dominant   { background: #86efac; color: #052e16; font-weight: 600; }
.locus-allele.recessive  { background: #475569; color: #e2e8f0; }
.locus-allele.wildtype-n { background: #14532d; color: #bbf7d0; }

/* Coat phenotype swatch placeholder until layered art lands. */
.coat-swatch {
    width: 88px; height: 64px;
    border-radius: 8px;
    display: inline-block;
}

/* Coat-color tinting — single-color phase. The wrapper fills its parent;
   the tint overlay multiplies a swatch colour into the mid-gray silhouette
   image. Future layered-art pass will replace .hbg-coat-tint with multiple
   region overlays driven by the same --coat-* variables. */
.hbg-coat {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
}
.hbg-coat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.hbg-coat-tint {
    position: absolute;
    inset: 0;
    /* background and mask-image are set inline by hbg_render_coat() so
       the mask url() resolves relative to the document, not this file. */
    mix-blend-mode: multiply;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    pointer-events: none;
}

/* Info-modal trigger button (the ⓘ glyph). Subtle until hovered. */
.hbg-info-btn {
    background: transparent;
    border: none;
    padding: 0 0.15em;
    font-size: 0.95em;
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
    transition: color 120ms ease;
}
.hbg-info-btn:focus-visible {
    outline: 2px solid #4ade80;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Info modal — native <dialog> styling. Tailwind handles the chrome;
   this file owns the backdrop and entry animation, which Tailwind
   utilities can't express. */
#hbg-info-modal {
    color: inherit;
}
#hbg-info-modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#hbg-info-modal[open] {
    animation: hbg-modal-in 160ms ease-out;
}
#hbg-info-modal[open]::backdrop {
    animation: hbg-backdrop-in 160ms ease-out;
}
@keyframes hbg-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes hbg-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Helper panel (Phase 2ac) — slide-in handled inline via transform.
   Spotlight hole keeps a smooth reposition between targets. */
#hbg-tutorial-hole {
    transition: left 180ms ease-out, top 180ms ease-out,
                width 180ms ease-out, height 180ms ease-out;
}

/* Helper edge tab — subtle hover lift */
#hbg-helper-tab {
    transition: transform 160ms ease, background-color 160ms ease;
}
#hbg-helper-tab:hover {
    transform: translateX(-2px);
}

/* Mobile: full-width panel takeover below sm breakpoint. */
@media (max-width: 640px) {
    #hbg-helper-panel {
        width: 100% !important;
    }
}