/*
 * Macro Chef bespoke CSS (~60-80 lines beyond Tailwind CDN).
 *
 * Tailwind handles 95% of styling via utility classes; this file carries
 * the small set of utilities not expressible as Tailwind atoms:
 *   .fld          form input baseline (focus ring, transition)
 *   .pulse-dot    blinking accent for the "live" indicator
 *   .grain        SVG-noise overlay helper for cards
 *   .tnum         tabular-nums numeric column alignment
 *   .meal-row     macro pill-row layout shorthand
 *   .hairline     1px inset shadow border
 *   .bar-anim     bar-grow keyframe binding
 *   .card-reveal  staggered card fade-in keyframe binding
 *
 * All colors reference :root oklch tokens defined in templates/base.html
 * (palette D earth). Do not hardcode hex values here -- the design tokens
 * are the single source of truth (DL-009 / C-05).
 */

:root {
    color-scheme: dark;
}

/* Tabular numerals -- macro counts, fit scores, kcal totals. */
.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Form field baseline. */
.fld {
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fld:focus {
    outline: none;
    border-color: var(--earn);
    box-shadow: 0 0 0 2px var(--earn-glow);
}

/* Chrome autofill paints over the field's bg + text. Pin both back to the
   palette so password-manager fills stay legible against the dark surface. */
.fld:-webkit-autofill,
.fld:-webkit-autofill:hover,
.fld:-webkit-autofill:focus,
.fld:-webkit-autofill:active {
    -webkit-text-fill-color: var(--paper) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ink-3) inset !important;
    caret-color: var(--paper) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Hairline 1px inset border. */
.hairline {
    box-shadow: inset 0 0 0 1px var(--rule-soft);
}

/* Subtle blink for live/active dot. */
@keyframes mc-pulse-dot {
    0%, 100% { opacity: 0.5 }
    50%      { opacity: 1 }
}
.pulse-dot {
    animation: mc-pulse-dot 1.6s ease-in-out infinite;
}

/* Grain overlay (cards). */
.grain {
    position: relative;
}
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.20;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Scrollbar to match palette D. */
.recipe::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.recipe::-webkit-scrollbar-thumb {
    background: var(--ink-3);
    border-radius: 3px;
}

/* Meal card row layout for the macro pill list. */
.meal-row > * {
    flex: 0 0 auto;
}