/* ============================================================================
   Component recipes — HOW components are built, one block per selectable recipe
   set. Layer 3 of the theme stack (tokens → roles → recipes). The admin picks
   the recipe set in the Theme tab; the server stamps
   <html data-theme-recipes="…"> on every served page (see app.server.js).

   Recipes own SHAPE and structure: border-radius, glow vs flat, uppercase
   tracking vs sentence case, hover/active motion, focus treatment. Colors come
   from the role vars (theme.roles.css), so any recipe composes with any role
   set and any token set.

     classic  — current site. THE CLASSIC BLOCK IS EMPTY BY DESIGN: the existing
                stylesheets ARE the classic recipe; this file only overrides.
     prestige — mock 1: generous radii (10/14px), pill chips, flat fill + glow
                ring on the primary CTA, hover brightness, tracked small caps.
     slate    — mock 2: tight radii (8/12px), hairline borders, NO glows,
                sentence case, transform-only motion, 2px offset focus outline.

   `!important` is used ONLY on shape props (radius / text-transform / shadow)
   so admin.html's ~50 inline-styled controls comply — a stylesheet !important
   beats a non-important inline style. Never used for colors.
   ============================================================================ */

/* ---- Scrollbars: shared base — colors come from the role vars (theme.roles.css)
   so the bar re-skins with every token/role set; per-recipe shape follows below.
   Applies to all themes incl. classic (this is the classic scrollbar shape). ---- */
* { scrollbar-width: thin; scrollbar-color: var(--role-scrollbar-thumb) var(--role-scrollbar-track); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--role-scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--role-scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;   /* inset the thumb from the track edges */
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--role-scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--role-scrollbar-track); }

/* ---- Classic: no overrides (base stylesheets are the classic recipe) ------ */
html[data-theme-recipes="classic"] { /* intentionally empty */ }

/* ============================ PRESTIGE (mock 1) ============================ */

/* Buttons: generous 10px radius, flat fill (color via roles), hover brightness */
html[data-theme-recipes="prestige"] .btn,
html[data-theme-recipes="prestige"] .btn-primary,
html[data-theme-recipes="prestige"] .btn-ghost,
html[data-theme-recipes="prestige"] .btn-danger,
html[data-theme-recipes="prestige"] .btn-golden,
html[data-theme-recipes="prestige"] .btn-trailer,
html[data-theme-recipes="prestige"] .tab-button,
html[data-theme-recipes="prestige"] .tool-btn,
html[data-theme-recipes="prestige"] .se-btn,
html[data-theme-recipes="prestige"] .join-battle,
html[data-theme-recipes="prestige"] .reconnect-btn,
html[data-theme-recipes="prestige"] .back-btn,
html[data-theme-recipes="prestige"] .takeback-btn,
html[data-theme-recipes="prestige"] .lobby button,
html[data-theme-recipes="prestige"] .modal button,
html[data-theme-recipes="prestige"] .play-btn,
html[data-theme-recipes="prestige"] .quick-join-btn,
html[data-theme-recipes="prestige"] .filter-btn,
html[data-theme-recipes="prestige"] .m1-btn,
html[data-theme-recipes="prestige"] .m2-cta,
html[data-theme-recipes="prestige"] #controls button {
    border-radius: 10px !important;
}
html[data-theme-recipes="prestige"] .btn-primary:hover,
html[data-theme-recipes="prestige"] .btn-golden:hover {
    transform: none;
    filter: brightness(1.04);
}
html[data-theme-recipes="prestige"] .btn-primary:active,
html[data-theme-recipes="prestige"] .btn-golden:active {
    transform: translateY(1px);
    filter: brightness(0.96);
}

/* Panels & cards: 14px radius */
html[data-theme-recipes="prestige"] .card,
html[data-theme-recipes="prestige"] .room-card,
html[data-theme-recipes="prestige"] .content-card,
html[data-theme-recipes="prestige"] .content-row,
html[data-theme-recipes="prestige"] .card-item,
html[data-theme-recipes="prestige"] .testimonial-card,
html[data-theme-recipes="prestige"] .panel-box,
html[data-theme-recipes="prestige"] .doc-item,
html[data-theme-recipes="prestige"] .countdown-container,
html[data-theme-recipes="prestige"] .clock {
    border-radius: 14px !important;
}

/* Chips & badges: pills */
html[data-theme-recipes="prestige"] .user-chip,
html[data-theme-recipes="prestige"] .badge,
html[data-theme-recipes="prestige"] .badge-future,
html[data-theme-recipes="prestige"] .solved-badge {
    border-radius: 999px !important;
}

/* Inputs: 10px radius (also admin's inline-styled controls) */
html[data-theme-recipes="prestige"] input,
html[data-theme-recipes="prestige"] select,
html[data-theme-recipes="prestige"] textarea {
    border-radius: 10px !important;
}

/* Labels: tracked small caps (mock1 .label: uppercase, 0.14em) */
html[data-theme-recipes="prestige"] .section-label,
html[data-theme-recipes="prestige"] .rail-title,
html[data-theme-recipes="prestige"] .card-name {
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
}

/* Scrollbar: generous pill thumb, slightly wider (prestige shape) */
html[data-theme-recipes="prestige"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme-recipes="prestige"] ::-webkit-scrollbar-thumb { border-radius: 999px !important; }

/* Input focus: gold border + soft wash ring (colors via role vars) */
html[data-theme-recipes="prestige"] input:focus,
html[data-theme-recipes="prestige"] select:focus,
html[data-theme-recipes="prestige"] textarea:focus {
    outline: none;
    border-color: var(--role-input-focus-border) !important;
    box-shadow: var(--role-input-focus-ring) !important;
}

/* ============================== SLATE (mock 2) ============================= */

/* Buttons: tight 8px radius, sentence case, no glow, transform-only motion */
html[data-theme-recipes="slate"] .btn,
html[data-theme-recipes="slate"] .btn-primary,
html[data-theme-recipes="slate"] .btn-ghost,
html[data-theme-recipes="slate"] .btn-danger,
html[data-theme-recipes="slate"] .btn-golden,
html[data-theme-recipes="slate"] .btn-trailer,
html[data-theme-recipes="slate"] .tab-button,
html[data-theme-recipes="slate"] .tool-btn,
html[data-theme-recipes="slate"] .se-btn,
html[data-theme-recipes="slate"] .back-btn,
html[data-theme-recipes="slate"] .takeback-btn,
html[data-theme-recipes="slate"] .lobby button,
html[data-theme-recipes="slate"] .play-btn,
html[data-theme-recipes="slate"] .quick-join-btn,
html[data-theme-recipes="slate"] .filter-btn,
html[data-theme-recipes="slate"] .m1-btn,
html[data-theme-recipes="slate"] .m2-cta,
html[data-theme-recipes="slate"] #controls button {
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html[data-theme-recipes="slate"] .btn-primary,
html[data-theme-recipes="slate"] .btn-golden {
    box-shadow: none !important;
}
html[data-theme-recipes="slate"] .btn-primary:hover,
html[data-theme-recipes="slate"] .btn-golden:hover {
    transform: translateY(-1px);
    box-shadow: none !important;
    filter: none;
}
html[data-theme-recipes="slate"] .btn-primary:active,
html[data-theme-recipes="slate"] .btn-golden:active {
    transform: translateY(0) scale(0.98);
}
html[data-theme-recipes="slate"] .join-battle {
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.30) !important;
}

/* Panels & cards: 12px radius, flat card shadows */
html[data-theme-recipes="slate"] .card,
html[data-theme-recipes="slate"] .room-card,
html[data-theme-recipes="slate"] .content-card,
html[data-theme-recipes="slate"] .content-row,
html[data-theme-recipes="slate"] .card-item,
html[data-theme-recipes="slate"] .testimonial-card,
html[data-theme-recipes="slate"] .panel-box,
html[data-theme-recipes="slate"] .doc-item,
html[data-theme-recipes="slate"] .countdown-container,
html[data-theme-recipes="slate"] .clock {
    border-radius: 12px !important;
}
html[data-theme-recipes="slate"] .user-chip { border-radius: 12px !important; }
html[data-theme-recipes="slate"] .badge,
html[data-theme-recipes="slate"] .badge-future,
html[data-theme-recipes="slate"] .solved-badge { border-radius: 4px !important; }

/* No glows anywhere ("transform and opacity only") */
html[data-theme-recipes="slate"] .page-heading,
html[data-theme-recipes="slate"] .stat .big.gold,
html[data-theme-recipes="slate"] .nav-item.active {
    text-shadow: none !important;
}

/* Inputs: 8px radius */
html[data-theme-recipes="slate"] input,
html[data-theme-recipes="slate"] select,
html[data-theme-recipes="slate"] textarea {
    border-radius: 8px !important;
}

/* Scrollbar: thin, tight, flat bar (mock2 restraint — no inset, tight radius) */
html[data-theme-recipes="slate"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme-recipes="slate"] ::-webkit-scrollbar-thumb {
    border-radius: 3px !important;
    border: 0 !important;
    background-clip: border-box;
}

/* Focus: 2px solid outline, 2px offset (mock2 focus-ring contract) */
html[data-theme-recipes="slate"] button:focus-visible,
html[data-theme-recipes="slate"] input:focus-visible,
html[data-theme-recipes="slate"] select:focus-visible,
html[data-theme-recipes="slate"] textarea:focus-visible,
html[data-theme-recipes="slate"] a:focus-visible {
    outline: 2px solid var(--role-focus-ring) !important;
    outline-offset: 2px;
}