/* ==========================================================================
   Production-only additions on top of the redesign prototype CSS.
   The prototype hides the nav on mobile with no replacement; prod needs a menu.
   ========================================================================== */

/* reset the browser default <button> chrome (grey buttonface) — every styled
   button in the design sets its own background/border via a class, so bare
   buttons like inactive .cfgtab / .faq__q must not show the UA grey fill */
button { background: none; border: 0; }

.appbar__burger {
    display: none;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: transparent;
}
.appbar__burger:hover { border-color: var(--brand-line); background: var(--brand-soft); }

@media (max-width: 900px) {
    .appbar__burger { display: inline-grid; }
    .appbar--open .appnav {
        display: flex;
        position: fixed;
        left: var(--gutter); right: var(--gutter);
        top: 72px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--surface-solid);
        box-shadow: var(--shadow-pop);
        z-index: 60;
    }
    .appbar--open .appnav a { padding: 12px 14px; }
}

/* mobile header: the price pill has no room next to the lockup + Оферта + burger
   and overlapped the logo on phones. Drop it on small screens (the price is also
   shown in the hero), and let the lockup subtitle truncate instead of overflowing. */
@media (max-width: 640px) {
    .appbar__price { display: none; }
    .appbar__inner { gap: 12px; }
    .lockup__sub { overflow: hidden; text-overflow: ellipsis; }
}

/* keep the floating-rail bottom padding off pages that have no proto rail */
body.no-proto { padding-bottom: 0; }

/* admin config tab panels: only the active one is shown (brand.js toggles .is-active) */
[data-admin-tab-panel] { display: none; }
[data-admin-tab-panel].is-active { display: grid; gap: 18px; }

/* install wizard: only the active step panel / db-connection group is shown */
[data-install-step-panel] { display: none; }
[data-install-step-panel].is-active { display: grid; gap: 16px; }
[data-connection-group] { display: none; }
[data-connection-group].is-active { display: grid; gap: 12px; }
.install__form { min-width: 0; }

/* admin config fields: the 2-col grid + full-width/textarea spans come from the
   prototype's `g2 cfg__fields` (app.css .g2 + admin.css .cfg__fields). Only the
   env-key monospace needs a nudge on top of the vendored styles. */
.cfield__env code { font-family: ui-monospace, monospace; }

/* overview status pills: never let a long path/domain push past the card edge */
.ovpill .micro { overflow-wrap: anywhere; }

/* branding preview: the macket centres the logo box via place-items, but a
   multi-line empty-state placeholder stays left-aligned inside the centred span
   — centre the text and give it breathing room so the dashed box reads clean */
.branding__logo { text-align: center; padding: 10px; }
.branding__logo .micro { max-width: 100%; }

/* profile widget states (brand.js toggles these) */
.profile-widget.is-warning { border-color: rgba(255,176,46,0.34); }
.profile-widget.is-error { border-color: rgba(255,90,95,0.34); }
.profile-widget.is-ready { border-color: var(--brand-line); }
.profile-methods { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-methods span { font-size: 12px; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }

/* lightweight modal (balance top-up, etc.) */
.admin-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.admin-modal[hidden] { display: none; }
.admin-modal__backdrop { position: absolute; inset: 0; background: rgba(6,8,15,0.7); backdrop-filter: blur(4px); }
.admin-modal__dialog { position: relative; width: min(520px, 100%); display: grid; gap: 16px; padding: clamp(20px,2.6vw,30px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-solid); box-shadow: var(--shadow-pop); }
.admin-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-modal__form { display: grid; gap: 14px; }
.admin-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-modal__feedback { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); font-size: 0.9rem; }
.admin-modal__feedback.is-success { border-color: rgba(31,209,138,0.34); background: var(--ok-soft); color: var(--ok); }
.admin-modal__feedback.is-error { border-color: rgba(255,90,95,0.34); background: var(--stop-soft); color: var(--stop); }

/* stat minicard (offer hero, etc.) — also defined in admin.css, mirrored here
   so it works on public pages where admin.css is not loaded */
.minicard { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-deep); display: grid; gap: 6px; align-content: start; }
.minicard > .micro { font-size: 12px; }
.minicard > strong { font-weight: 800; font-size: 1rem; line-height: 1.3; }

/* sticky save bar */
.cfg-save { position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); }
.cfg-save p { margin: 0; }

/* ==========================================================================
   Scroll-reveal hardening.
   The prototype hides .reveal (opacity:0) and lets JS add .is-in on scroll.
   On the real server a deferred redesign.js download can run a beat late, which
   left above-the-fold content (notably the hero) blank for ~1–2s. Drive the
   entrance with a pure-CSS animation so content is NEVER gated on JS timing;
   the JS .is-in path still works as a progressive enhancement, and
   prefers-reduced-motion (handled in styles.css) still forces it visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .reveal { animation: prodRevealIn 0.7s var(--ease) both; }
    .reveal[data-d="1"] { animation-delay: 0.07s; }
    .reveal[data-d="2"] { animation-delay: 0.14s; }
    .reveal[data-d="3"] { animation-delay: 0.21s; }
    .reveal[data-d="4"] { animation-delay: 0.28s; }
    .reveal[data-d="5"] { animation-delay: 0.35s; }
    .reveal.is-in { animation: none; opacity: 1; transform: none; }
}
@keyframes prodRevealIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}