/* M33 component primitives
 * =========================
 *
 * Shared building blocks used across every page. Reads design vocabulary
 * from tokens.css. Page-specific styles in site.css and audit.css now
 * compose with these primitives (e.g. <button class="btn btn-primary">)
 * instead of redefining the same button styles in five places.
 *
 * Naming: .btn .btn-{variant} .btn-{size?} .btn-{modifier?}
 *   .btn          // base — required alongside a variant
 *   .btn-primary  // solid blue with shimmer
 *   .btn-pill     // soft tinted blue pill
 *   .btn-ghost    // outline
 *   .btn-sm/-lg   // sizes
 *   .btn-block    // width 100%
 *   .btn-link     // text-only blue link (standalone)
 *   .btn-link-quiet // text-only gray link (standalone, smaller)
 *   .btn-icon-close // close X icon button (standalone)
 */

/* ── Buttons: base ──────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background var(--tx-fast),
                border-color var(--tx-fast),
                color var(--tx-fast);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Buttons: sizes ─────────────────────────────────────────────────── */

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
}
.btn-lg {
    padding: 1rem 3rem;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

/* ── Buttons: modifier ──────────────────────────────────────────────── */

.btn-block { width: 100%; }

/* ── Buttons: primary (solid blue with shimmer) ─────────────────────── */

.btn-primary {
    background: var(--c-blue-600);
    color: #fff;
}
.btn-primary:hover { background: var(--c-blue-700); }

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--tx-slow);
    pointer-events: none;
}
.btn-primary:hover::before { left: 100%; }

/* ── Buttons: pill (soft tinted blue) ───────────────────────────────── */
/* Used both standalone (.spec-toggle-btn — direct hover) and inside
   hoverable parent cards (.example-card / .spec-approach — group hover). */

.btn-pill {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    background: rgba(59, 130, 246, 0.22);
    border-color: var(--c-border-blue-soft);
    color: var(--c-blue-200);
}
.btn-pill:hover,
.example-card:hover .btn-pill,
.spec-approach:hover .btn-pill {
    background: rgba(59, 130, 246, 0.4);
    border-color: var(--c-blue-400);
    color: #fff;
}
.btn-pill:disabled { opacity: 0.6; cursor: wait; }

/* ── Buttons: ghost (transparent + subtle border) ───────────────────── */

.btn-ghost {
    background: transparent;
    border-color: var(--c-border-strong);
    color: var(--c-text-secondary);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
}

/* ── Buttons: glimmer (auto-repeating hover shimmer) ───────────────── */
/* Reuses the .btn-primary::before sweep that already plays on hover,
   but fires it on a 5-second loop so the button auto-pulses without
   needing the user to hover. Visually identical to the hover effect:
   one quick left-to-right pass of the white gradient band, then idle.
   Apply sparingly — one per page, on the single most important CTA. */
.btn-glimmer.btn-primary::before {
    /* Override the .btn-primary :hover transition with a keyframe
       loop. Sweep occupies the first 10% of the 5s cycle (= 0.5s,
       same duration as the hover --tx-slow), then the band parks
       off-screen for the remaining 4.5s before the next sweep. */
    transition: none;
    animation: btn-glimmer-sweep 5s linear infinite;
}
@keyframes btn-glimmer-sweep {
    0%   { left: -100%; }
    10%  { left: 100%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-glimmer.btn-primary::before { animation: none; }
}

/* ── Buttons: loading state (booking buttons that fetch async) ──────── */

.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}
.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}
@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Text-only links (no border, no padding) ────────────────────────── */

/* Inline blue link — used inside copy and as secondary CTA */
.btn-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--c-blue-300);
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--tx-fast);
}
.btn-link:hover { color: var(--c-blue-200); }

/* Smaller, quieter gray link — utility actions (share, restart) */
.btn-link-quiet {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--tx-fast);
}
.btn-link-quiet:hover { color: var(--c-blue-300); }

/* ── Shell panel ────────────────────────────────────────────────────── */

/* Translucent gray-800 surface that lets the animated body gradient
   bleed through, so cards inside (solid bg-gray-800) read clean against
   an ambient backdrop. Originated as .audit-shell-wide on the result
   page; reused on the home Examples section so both pages share the
   same layered "body → tinted panel → solid card" interplay.

   Just the bg recipe. Pages add their own width, padding, margin, and
   border-radius (audit-shell-wide is a centered rounded panel; the home
   Examples section is full-bleed with no rounded corners). */
.shell-panel {
    background: var(--c-bg-shell);
}

/* ── Cards ──────────────────────────────────────────────────────────── */

/* Base — minimal layout primitive. Only sets up the positioning context
   for the .card-clickable chevron (position: relative). Pages add their
   own surface vocabulary (background, border, padding, radius, gap) and
   their own display mode — audit-page cards are flex-column so children
   can use margin-top: auto, but the home gallery card keeps the natural
   block flow it inherits from its Tailwind utilities. */
.card {
    position: relative;
}

/* Clickable card affordance — top-right chevron + cursor + transition.
   Pages own the chevron color/font-size, the :hover lift effect
   (translateY for audit, scale-105 for home gallery), and the :active
   press scale, since each surface has its own hover language. */
.card-clickable {
    cursor: pointer;
    transition: border-color var(--tx-fast),
                transform var(--tx-fast),
                box-shadow var(--tx-fast);
}
.card-clickable::after {
    content: "↗";
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transition: color var(--tx-fast), transform var(--tx-fast);
}

/* ── Form fields ────────────────────────────────────────────────────── */

/* Field label — uppercase blue label that sits above an input. Used as a
   <label> on text inputs and as a <legend> on fieldsets (where its block
   display is the natural default). */
.field-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-blue-300);
    margin-bottom: var(--space-2);
}

/* Hint text — smaller gray helper that sits below an input. */
.field-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    margin-top: var(--space-1);
}

/* Text input / textarea base. Used for every single-line and multi-line
   text field across the audit form and contact panel. */
.input {
    width: 100%;
    box-sizing: border-box;
    background: var(--c-bg-translucent);
    border: 1px solid var(--c-border-strong);
    color: #fff;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color var(--tx-fast);
}
.input:focus {
    outline: none;
    border-color: var(--c-blue-600);
}
.input::placeholder { color: var(--c-text-muted); }

/* Smaller input — used in the contact panel where horizontal space is
   tight. */
.input-sm {
    padding: 0.65rem 0.85rem;
    font-size: var(--text-sm);
}

/* Textarea modifier — comfortable minimum height + vertical-only resize. */
.input-textarea {
    min-height: 7rem;
    resize: vertical;
}
.input-sm.input-textarea { min-height: 6rem; }

/* ── Icon button: close X ───────────────────────────────────────────── */

.btn-icon-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: 0;
    color: var(--c-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tx-fast), color var(--tx-fast);
}
.btn-icon-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text-primary);
}