/* Onysoft marketing-site extras (layout chrome that needs selectors).
   Tokens come from onysoft-ds.css; components from ony-components.css. */

.ony-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Logo swaps with theme */
.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark { display: inline; }

/* Header */
.site-hd { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--bg-app) 85%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-hd__in { display: flex; align-items: center; gap: 22px; height: 66px; }
.mnav { display: flex; gap: 4px; margin-left: 8px; }
.mnav a { font-size: 14px; font-weight: 600; color: var(--text-secondary); padding: 8px 12px; border-radius: 8px;
    text-decoration: none; cursor: pointer; transition: color .14s, background .14s; }
.mnav a:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
.mnav a.is-active { color: var(--accent); }
/* Action buttons that live INSIDE the mobile dropdown (login / get-started / dashboard).
   Hidden on desktop — there the same buttons sit in the top bar; shown only in the open drawer. */
.mnav__actions { display: none; }

/* Language pill */
.lang-pill { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: 999px; padding: 3px; }
.lang-pill a { font-size: 12px; font-weight: 700; color: var(--text-secondary); padding: 5px 11px; border-radius: 999px; text-decoration: none; }
.lang-pill a:hover { text-decoration: none; }
.lang-pill a.is-active { background: var(--accent); color: #fff; }

/* Theme toggle button */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; }
.theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ti-dark { display: none; }
[data-theme="dark"] .ti-light { display: none; }
[data-theme="dark"] .ti-dark { display: inline-flex; }

/* Mobile burger */
.burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md);
    border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }

@media (max-width: 940px) {
    .site-hd__in { gap: 10px; }
    .mnav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; gap: 2px;
        background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: 12px 20px 16px; }
    .mnav.is-open { display: flex; }
    .burger { display: inline-flex; }
    .hd-hide-sm { display: none; }
    /* Surface the auth/CTA buttons inside the open dropdown (they're hidden from the top bar on mobile). */
    .mnav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 14px;
        border-top: 1px solid var(--border-default); }
}
@media (max-width: 560px) {
    .ony-container { padding: 0 16px; }
}
@media (max-width: 820px) {
    .home-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; }
    .ftr-cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .ftr-cols { grid-template-columns: 1fr !important; }
    .ftr-contact { grid-template-columns: 1fr !important; }
}

/* ---- Panel sidebar nav ---- */
.pnav { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-md);
    color: var(--text-secondary); font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 2px;
    transition: background .14s, color .14s; }
.pnav:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.pnav.is-active { background: var(--accent-soft); color: var(--accent); }
.pnav__l { flex: 1; }
.pnav__b { font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; font-family: var(--font-mono); }
/* Off-canvas drawer backdrop (created by app.js) + body scroll-lock while the drawer is open. */
.app-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 23, .5); backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.app-scrim.is-open { opacity: 1; visibility: visible; }
body.is-drawer-open { overflow: hidden; }
@media (min-width: 881px) { .app-scrim { display: none !important; } }

@media (max-width: 880px) {
    .app-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
    .app-side.is-open { transform: none; }
    .app-burger { display: inline-flex !important; }
    /* Tighten the panel shell so content gets the full narrow width. */
    .app-main { padding: 18px 16px !important; }
    .app-topbar { gap: 8px !important; padding: 0 12px !important; }
    .app-topbar .ony-input { display: none !important; }   /* search collapses on mobile */
}
@media (max-width: 560px) {
    .app-main { padding: 14px 12px !important; }
    .app-topbar { gap: 6px !important; }
}

/* Immersive WebRTC remote viewer. Scoped to the /remote page via the ony-rtc-fullscreen body class
   (added by remote.php). The HEIGHT LOCK below applies at ALL sizes so the whole remote screen fits
   letterboxed by default — the panel content area must NOT scroll and the stage must NOT overflow. */
body.ony-rtc-fullscreen .app-main {
    overflow: hidden !important;   /* the shell fills exactly; nothing scrolls the panel */
    min-height: 0;
}
/* FIT (default): the video is letterboxed inside the fixed-height stage — whole desktop visible. */
body.ony-rtc-fullscreen #rtcStage.is-fit #rtcVideo {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
/* ACTUAL / 1:1: render native pixels and let the stage scroll so the user can pan for detail. */
body.ony-rtc-fullscreen #rtcStage.is-actual {
    overflow: auto !important; align-items: flex-start; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}
body.ony-rtc-fullscreen #rtcStage.is-actual #rtcVideo {
    max-width: none; max-height: none; width: auto; height: auto; margin: auto;
}

/* Drop the panel chrome + compact the toolbar on small screens (phone = immersive). */
@media (max-width: 880px) {
    body.ony-rtc-fullscreen .app-topbar { display: none !important; }
    body.ony-rtc-fullscreen .app-main { padding: 0 !important; }
    body.ony-rtc-fullscreen .rtc-shell { margin: 0 !important; }
    .rtc-toolbar { gap: 9px !important; padding: 10px 12px !important; }
    .rtc-toolbar .rtc-mname { max-width: 38vw !important; }
    .rtc-toolbar .rtc-mip { display: none; }
    .rtc-foot { display: none !important; }   /* reclaim height for the video on phones */
}

/* ---- Mobile touch-control layer (joystick-like on-screen controls) ---------------------------
   Hidden on desktop; shown only on coarse-pointer / small screens. Thumb-reachable, theme-aware. */
.rtc-mbar, .rtc-mopen { display: none; }

/* Reveal on touch/coarse pointers OR narrow screens (covers phones + touch tablets/laptops). */
@media (pointer: coarse), (max-width: 880px) {
    .rtc-mbar:not([hidden]) { display: flex; }
    .rtc-mopen:not([hidden]) { display: inline-flex; }
}

.rtc-mbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    flex-direction: column; gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    border-top: 1px solid var(--border-default);
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.28);
}
.rtc-mbar__row { display: flex; gap: 7px; align-items: center; justify-content: center; flex-wrap: wrap; }
.rtc-mkey {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--border-default); border-radius: 12px;
    background: var(--bg-app); color: var(--text-primary);
    font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1;
    cursor: pointer; -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.rtc-mkey:active { transform: scale(.94); background: var(--bg-sunken); }
.rtc-mkey--wide { flex: 1; min-width: 0; }
.rtc-mkey--mod.is-armed {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
/* RIGHT-CLICK armed pulse. */
.rtc-mkey.is-armed {
    background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Floating opener (bottom-right) to re-open the collapsed control bar. */
.rtc-mopen {
    position: absolute; z-index: 6;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border-default));
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 90%, #000); color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.34); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rtc-mopen:active { transform: scale(.92); }

/* =========================================================================
   GLOBAL MOBILE SAFETY NET  (app-wide; reaches inline styles, no per-view edits)
   Many views set grids/widths inline. Attribute selectors + !important override
   inline declarations (which lack !important), so 2/3/4-column layouts collapse
   to a single column on phones, tables scroll inside their wrapper, media never
   exceeds the viewport, and dialogs fit the screen.
   ========================================================================= */
img, svg, video, canvas { max-width: 100%; height: auto; }
.app-main { overflow-x: hidden; }            /* panel content never scrolls sideways */
.ony-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
    /* Collapse explicit multi-column inline grids to one column. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(auto"],
    [style*="grid-template-columns: repeat(auto"],
    [style*="grid-template-columns:minmax"],
    [style*="grid-template-columns: minmax"] {
        grid-template-columns: 1fr !important;
    }
    .ony-table { min-width: 560px; }         /* stay readable; the wrapper scrolls */
    /* Card headers / toolbars / filter rows wrap instead of overflowing. */
    .ony-card__head { flex-wrap: wrap; gap: 10px; }
    /* Design-system dialogs fill the phone width. */
    .ony-dialog, .ony-modal__panel { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}
@media (max-width: 480px) {
    /* Down to the smallest phones: even 2-up KPI/stat grids go single-column. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- Blog article body ---- */
.article { max-width: 760px; margin: 0 auto; color: var(--text-secondary); font-size: 16.5px; line-height: 1.75; }
.article > *:first-child { margin-top: 0; }
.article h2 { font-size: 25px; color: var(--text-primary); margin: 36px 0 12px; letter-spacing: -.01em; line-height: 1.25; }
.article h3 { font-size: 19px; color: var(--text-primary); margin: 26px 0 10px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin: 7px 0; }
.article a { color: var(--text-link); }
.article strong { color: var(--text-primary); }
.article blockquote { margin: 26px 0; padding: 16px 22px; border-left: 3px solid var(--accent);
    background: var(--bg-sunken); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-primary);
    font-size: 17.5px; font-style: italic; }
.article code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-sunken); padding: 2px 6px; border-radius: 6px; }