/* ============================================================================
 * bitting.css
 *
 * Visual design tokens + utility classes for the Bitting package.
 *
 * Consumers link this once from their host page:
 *   <link rel="stylesheet" href="_content/Bitting/bitting.css" />
 *
 * Override the CSS variables in your own :root to re-skin without forking:
 *   :root {
 *       --bitting-md: clamp(12px, 1.1vw, 16px);
 *       --bitting-positive: #2ecc71;
 *       --bitting-negative: #e74c3c;
 *       (and so on for any token declared in :root below)
 *   }
 *
 * Accessibility note: the default palette below is a neutral starting point,
 * not contrast-audited for every use. When you re-theme via --bitting-*,
 * verify text usages meet WCAG AA (4.5:1); the accent slots (warning, info,
 * success, danger) are tuned for fills/accents rather than body text.
 * ============================================================================ */

:root {
    /* -- Size scale --------------------------------------------------------
     * Phi-stepped scale anchored on --bitting-md. Everything else (sizes, icon
     * sizes, line heights) derives from it via calc(). Override md to scale
     * the whole design system.
     */
    --bitting-phi: calc(1.6180339887 * 0.8);

    --bitting-md: clamp(10px, 1vw, 14px);

    --bitting-half-md: calc(var(--bitting-md) / 2);
    --bitting-qtr-md: calc(var(--bitting-md) / 4);

    --bitting-xs: calc(var(--bitting-md) / (var(--bitting-phi) * var(--bitting-phi)));
    --bitting-sm: calc(var(--bitting-md) / var(--bitting-phi));
    --bitting-lg: calc(var(--bitting-md) * var(--bitting-phi));
    --bitting-xl: calc(var(--bitting-md) * (var(--bitting-phi) * var(--bitting-phi)));

    --bitting-icon-multiplier: 2;
    --bitting-icon-xs: calc(var(--bitting-xs) * var(--bitting-icon-multiplier));
    --bitting-icon-sm: calc(var(--bitting-sm) * var(--bitting-icon-multiplier));
    --bitting-icon-md: calc(var(--bitting-md) * var(--bitting-icon-multiplier));
    --bitting-icon-lg: calc(var(--bitting-lg) * var(--bitting-icon-multiplier));
    --bitting-icon-xl: calc(var(--bitting-xl) * var(--bitting-icon-multiplier));

    /* -- Cartesian chart spacing ----------------------------------------- */
    --bitting-chart-entry-breadth: calc(var(--bitting-md) * 3);

    /* -- Neutral background tint ----------------------------------------- */
    --bitting-muted-gray: rgba(233, 236, 239, 0.6);

    /* -- Named colour palette (consumed by BittingColors) ----------------
     * The named slots in the BittingColors static palette resolve to these.
     * Defaults are a neutral, self-contained set so components render out of
     * the box. Override any of them in your own :root to re-theme — e.g.
     *   :root { --bitting-primary: #6c5ce7; }
     */
    --bitting-primary:   #236fca;
    --bitting-secondary: #6c757d;
    --bitting-info:      #087990;
    --bitting-warning:   #8a5a00;
    --bitting-success:   #198754;
    --bitting-danger:    #dc3545;
    --bitting-light:     #f8f9fa;
    --bitting-dark:      #343a40;
    --bitting-gray:      #6b7280;
    --bitting-muted:     rgba(0, 0, 0, 0.5);
    --bitting-white:     #fff;
    --bitting-black:     #000;
    --bitting-white-50:  rgba(255, 255, 255, 0.5);
    --bitting-black-50:  rgba(0, 0, 0, 0.5);
    --bitting-white-98:  rgba(255, 255, 255, 0.98);
    --bitting-white-85:  rgba(255, 255, 255, 0.85);
    --bitting-white-70:  rgba(255, 255, 255, 0.7);
    --bitting-white-45:  rgba(255, 255, 255, 0.45);
    --bitting-black-53:  rgba(0, 0, 0, 0.53);
    --bitting-black-35:  rgba(0, 0, 0, 0.35);
    --bitting-black-10:  rgba(0, 0, 0, 0.1);

    /* -- Surface, border, and elevation roles --------------------------- */
    --bitting-surface: var(--bitting-white);
    --bitting-canvas: #f4f6fa;
    --bitting-border-subtle: rgba(16, 24, 40, 0.08);
    --bitting-border-soft: rgba(16, 24, 40, 0.06);
    --bitting-shadow-soft: rgba(16, 24, 40, 0.10);
    --bitting-shadow: rgba(16, 24, 40, 0.25);
    --bitting-shadow-strong: rgba(16, 24, 40, 0.40);
    --bitting-muted-gray-80: rgba(233, 236, 239, 0.8);
    --bitting-muted-gray-40: rgba(233, 236, 239, 0.4);
    --bitting-scroll-fade: rgba(0, 0, 0, 0.05);
    --bitting-attention-80: rgba(255, 165, 0, 0.8);
    --bitting-attention-60: rgba(255, 165, 0, 0.6);
    --bitting-attention-40: rgba(255, 165, 0, 0.4);
    --bitting-attention-30: rgba(255, 165, 0, 0.3);
    --bitting-attention-20: rgba(255, 165, 0, 0.2);
    --bitting-border-width: max(1px, 0.0625rem);
    --bitting-border-width-strong: max(2px, 0.125rem);
    --bitting-focus-width: max(2px, 0.125rem);
    --bitting-focus-offset: max(2px, 0.125rem);
    --bitting-focus-ring: var(--bitting-primary);
    /* WCAG 2.2 target-size floor. Density tokens may shrink on small screens,
       but an interactive hit area must remain comfortably operable. */
    --bitting-target-min: max(24px, var(--bitting-icon-md));
    --bitting-layer-sticky: 10;
    --bitting-layer-dropdown: 1000;
    --bitting-layer-popover: 1100;
    --bitting-layer-tooltip: 1150;
    /* A modal takes the whole surface, so it sits above every transient layer.
       The backdrop sits directly beneath its own dialog. */
    --bitting-layer-modal-backdrop: 1200;
    --bitting-layer-modal: 1210;
    --bitting-content-max-width: 80rem;
    --bitting-grid-min-rainbow: 10.5rem;
    --bitting-grid-min-kpi: 13.125rem;
    --bitting-grid-min-two-column: 21.25rem;
    --bitting-grid-min-three-column: 16.25rem;
    --bitting-label-column-min: 6rem;
    --bitting-label-column-max: 11.25rem;

    /* -- Semantic colour tokens (consumed by BittingSemanticColor) -------
     * BittingSemanticColor.{Positive,Negative,Neutral,Muted} resolve to these.
     * Default to the palette slots above; override independently if you want
     * semantic colours to diverge from the named palette.
     */
    --bitting-positive: var(--bitting-success);
    --bitting-negative: var(--bitting-danger);
    --bitting-neutral:  var(--bitting-secondary);

    /* -- Typography ------------------------------------------------------
     * Font sizes live on the phi scale above (xs..xl). These carry the rest
     * of the type system: one family, three weights, line-heights, and the
     * heading tracking. Apply the family to your host body so every component
     * inherits it. */
    --bitting-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bitting-font-weight: 400;
    --bitting-font-weight-bold: 700;
    --bitting-font-weight-heavy: 800;
    --bitting-line-height: 1.4;
    --bitting-line-height-tight: 1;
    --bitting-letter-spacing-tight: -0.02em;

    /* -- Radius ----------------------------------------------------------
     * Corner rounding, tracking the size scale so radius scales with density.
     * Elevation is the .bitting-solid-shadow / .bitting-solid-drop-shadow
     * classes further down. */
    --bitting-radius-sm: var(--bitting-sm);
    --bitting-radius:    var(--bitting-md);
    --bitting-radius-pill: 100vmax;

    /* -- Motion ----------------------------------------------------------
     * Duration + easing tokens for the transitions below. Keyframe animations
     * keep their tuned per-animation timing. All motion is suppressed under
     * prefers-reduced-motion (see the media query further down). */
    --bitting-duration-fast: 0.15s;
    --bitting-duration:      0.3s;
    --bitting-duration-slow: 0.5s;
    --bitting-ease:          ease;
    --bitting-ease-out:      ease-out;
    --bitting-ease-in-out:   ease-in-out;
    --bitting-motion-lift: calc(var(--bitting-qtr-md) * -1);
    --bitting-motion-lift-subtle: calc(var(--bitting-border-width) * -1);
    --bitting-motion-scale: 1.02;
    --bitting-motion-scale-emphasis: 1.06;

    /* -- Tooltip --------------------------------------------------------- */
    --bitting-tooltip-max-width: calc(var(--bitting-md) * 16);
    --bitting-tooltip-offset: var(--bitting-sm);
    --bitting-tooltip-opacity: 0.9;
}

/* ============================================================================
 * BITTING - LATCH: BASE FRAMEWORK
 * ============================================================================ */

.bitting-font-xs { font-size: var(--bitting-xs); }
.bitting-font-sm { font-size: var(--bitting-sm); }
.bitting-font-md { font-size: var(--bitting-md); }
.bitting-font-lg { font-size: var(--bitting-lg); }
.bitting-font-xl { font-size: var(--bitting-xl); }

/* Section headings share one structural treatment so pages can establish
   consistent rhythm around them without depending on inline declarations. */
.bitting-section-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: var(--bitting-md);
    font-size: var(--bitting-xl);
    font-weight: var(--bitting-font-weight-bold);
}

.bitting-section-header__title {
    display: block;
    padding-bottom: calc(var(--bitting-md) / 4);
}

.bitting-solid-shadow {
    box-shadow: 0 0 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray-80);
}

.bitting-solid-drop-shadow {
    box-shadow:
        0 0 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray-80),
        0 calc(var(--bitting-md) * 0.2) 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray),
        0 calc(var(--bitting-md) * 0.4) 0 calc(var(--bitting-md) * 0.1) var(--bitting-muted-gray-40);
}

.bitting-solid-inset-shadow {
    box-shadow:
        inset 0 0 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray-80),
        inset 0 calc(var(--bitting-md) * 0.2) 0 calc(var(--bitting-md) * 0.15) var(--bitting-muted-gray),
        inset 0 calc(var(--bitting-md) * 0.4) 0 calc(var(--bitting-md) * 0.10) var(--bitting-muted-gray-40);
}

.bitting-hover {
    transition: background-color var(--bitting-duration-fast) var(--bitting-ease);
}

.bitting-hover:hover {
    cursor: pointer;
    background-color: var(--bitting-muted-gray) !important;
}

.bitting-selected {
    background-color: var(--bitting-muted-gray) !important;
}

.bitting-flat {
    background-color: var(--bitting-muted-gray) !important;
}

/* -- Hover-opacity utilities --------------------------------------------
 * Backing classes for the BittingHoverOpacityStyle enum, applied by every
 * interactive Bitting component (PillButton, ArrowBookends, SelectableIcon,
 * DropDownMenu, etc.). At rest the element renders at partial opacity;
 * hovering lifts it to fully opaque.
 *   Subtle  → default for pill buttons (gentle dim at rest).
 *   Normal  → stronger affordance for icons + bookends.
 *
 * These classes were previously declared in
 * a host stylesheet and did not ship to
 * consumers of just this package, leaving the hover effect dead. Moved
 * here so the Bitting package is self-contained.
 */
.opacity-hover {
    opacity: 0.75;
    transition: opacity var(--bitting-duration) var(--bitting-ease);
}

.opacity-hover:hover {
    opacity: 1;
}

.subtle-opacity-hover {
    opacity: 0.9;
    transition: opacity var(--bitting-duration) var(--bitting-ease);
}

.subtle-opacity-hover:hover {
    opacity: 1;
}

/* -- flex-centered: micro-utility used throughout Bitting markup --------- */
.flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- bitting-spinner: dependency-free loading spinner --------------------
 * Replaces the Font Awesome <i class="fas fa-spin fa-spinner"> pattern so
 * the package has no icon-font requirement on the consumer. Sizes from the
 * current text font-size; inherits currentColor.
 */
.bitting-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bitting-spinner-rotate 0.75s linear infinite;
}

@keyframes bitting-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ============================================================================
 * BITTING - LATCH: MISC UTILITIES + ANIMATIONS
 *
 * Self-contained replacements for the handful of Bootstrap/unlocked.css
 * utility classes the components reference, so the package needs no external
 * stylesheet.
 * ============================================================================ */

/* Screen-reader-only text (Bootstrap's .visually-hidden equivalent). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.opacity-25 { opacity: 0.25 !important; }

/* Pill add/enter animation (BittingPillButton FadeIn). */
.fade-grow-in {
    animation: bitting-fade-grow-in 0.15s ease-out;
}

@keyframes bitting-fade-grow-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Attention pulses (BittingTile Wobble / PulseGlow). */
.pulse-wobble {
    animation: bitting-pulse-wobble 0.4s ease-in-out;
}

@keyframes bitting-pulse-wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-1.5deg); }
    75%      { transform: rotate(1.5deg); }
}

.pulse-glow {
    animation: bitting-pulse-glow 1.5s ease-in-out infinite;
}

@keyframes bitting-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bitting-primary) 40%, transparent); }
    50%      { box-shadow: 0 0 0 calc(var(--bitting-md) * 0.4) transparent; }
}

/* ============================================================================
 * BITTING - LATCH: PRINT UTILITIES
 *
 * Bitting components reference these classes (BittingTile's screenshot button,
 * BittingHorizontalNavigation, BittingVerticalNavigation, BittingRenderVeil,
 * BittingQuestionTooltip, BittingSlide). Before this block they were defined
 * only in a host stylesheet and so did not ship
 * to consumers of just this package, leaving the print behavior silently dead.
 *
 *   .no-print / .print-none — hide chrome that doesn't belong in a printout
 *                              (capture buttons, nav, loading overlays).
 *   .print-dont-break       — keep a tile or row intact across a page break.
 * ============================================================================ */
@media print {
    .no-print,
    .print-none {
        display: none !important;
    }

    .print-dont-break {
        break-inside: avoid;
        page-break-inside: avoid !important;
    }
}

/* ============================================================================
 * REDUCED MOTION (WCAG 2.3.3)
 *
 * Honour the user's OS "reduce motion" setting: drop the decorative entrance
 * and attention animations entirely, and gentle the loading spinner to a slow
 * turn so it still reads as "busy" without a fast, vestibular-triggering spin.
 * The default (no-preference) look is unchanged.
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-grow-in,
    .pulse-wobble,
    .pulse-glow {
        animation: none;
    }

    .bitting-spinner {
        animation-duration: 2s;
    }
}

/* ============================================================================
 * KEYBOARD FOCUS (WCAG 2.4.7)
 *
 * :focus-visible fires for keyboard navigation only, so mouse users see the
 * resting look unchanged. A conventional outline (what users expect) sits
 * outside the shadow language, in the brand colour.
 * ============================================================================ */
[role="button"]:focus-visible,
.bitting-pill-button:focus-visible,
.subtle-opacity-hover:focus-visible,
.opacity-hover:focus-visible {
    outline: var(--bitting-focus-width) solid var(--bitting-focus-ring);
    outline-offset: var(--bitting-focus-offset);
    opacity: 1;
}

/* Shared hit-area contract for icon-only controls. The glyph can stay on the
   five-step visual scale while its operable area remains at least 24 CSS px. */
.bitting-icon-target {
    min-width: var(--bitting-target-min);
    min-height: var(--bitting-target-min);
}

/* ============================================================================
 * REQUIRED HOST GRID
 *
 * BittingSlide and selectable tile rows currently consume Bootstrap's grid and
 * flex utilities. Keep this dependency explicit until Bitting owns the narrow
 * set of layout primitives tracked in ROADMAP.md.
 * ============================================================================ */
/* The Bitting components use the Bootstrap 5 grid (row / col-*, with gutters)
 * and Bootstrap utilities (flex-grow-1, text-center, align-items-center,
 * p-*/m-*, and the global box-sizing: border-box reset). The host page must
 * load Bootstrap — the same setup Unlock8s ships. We deliberately do NOT
 * redefine .row/.col here: a stub copy without Bootstrap's gutter system is
 * exactly what collapsed the spacing between tiles. */