/* ============================================================
   .uk-browser-mockup — proposed canonical browser-frame mockup (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the duplicated browser-frame chrome in `public/css/style.css`:

     .mockup-browser            -> .uk-browser-mockup                 (root frame: card + border + shadow + radius + overflow:hidden)
     .browser-bar               -> .uk-browser-mockup-bar             (top chrome — dots + url)
     .browser-dots              -> .uk-browser-mockup-dots
     .browser-dots span:nth-...  -> .uk-browser-mockup-dots > span    (red/yellow/green via nth-child, like macOS)
     .browser-url               -> .uk-browser-mockup-url             (centered mono url chip)
     .browser-content           -> .uk-browser-mockup-content         (slot for page content)

   Plus a duplicate chunk in style.css under the dashboard mockup
   (`.dash-browser` + same `.browser-bar` / `.browser-dots` etc.) — both
   collapse onto this canonical at Phase 3.

   Composes with: nothing — leaf primitive. The content slot is just a
   styled padding container; consumers drop whatever they want inside
   (status page, dashboard, terminal, plain prose).

   Three modifiers: `--ssl` (small lock icon prefix on the url),
   `--dark` (darker chrome variant for the on-dark hero contexts), and
   `--no-padding` (removes the content padding when the inner mockup
   already manages its own spacing).
   ============================================================ */

/* ============================================
   Root — card frame with chrome bar
   ============================================
   `overflow: hidden` clips the bar's bottom border into the radius and
   keeps any inner content from spilling past the rounded corners.
   ============================================ */
.uk-browser-mockup {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* ============================================
   Chrome bar — dots on the left, url centered
   ============================================ */
.uk-browser-mockup-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--color-border);
}

/* ============================================
   Dots — macOS-style red / yellow / green window controls
   ============================================
   Decorative only. nth-child colours match macOS conventions
   (close / minimize / maximize). Aria-hidden on the wrapper since these
   carry no functional meaning in a static mockup.
   ============================================ */
.uk-browser-mockup-dots {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.uk-browser-mockup-dots > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.uk-browser-mockup-dots > span:nth-child(1) { background: #ef4444; }
.uk-browser-mockup-dots > span:nth-child(2) { background: #eab308; }
.uk-browser-mockup-dots > span:nth-child(3) { background: #3d916f; }

/* ============================================
   URL — centered mono chip
   ============================================
   Reads as a quiet placeholder url. Truncates with ellipsis if the url
   is too long for the bar so the dots stay fixed and the layout never
   wraps unexpectedly.
   ============================================ */
.uk-browser-mockup-url {
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --ssl — adds a small inline lock glyph before the url */
.uk-browser-mockup--ssl .uk-browser-mockup-url::before {
    content: '\1F512'; /* 🔒 — keep a regular space, not nbsp, so the glyph + url break naturally on overflow */
    margin-right: 0.4em;
    color: var(--color-success);
    font-family: var(--font-sans);
    font-size: 0.85em;
}

/* ============================================
   Content slot
   ============================================
   Default padding so consumers can drop prose / icons / lists straight
   in. Apply `--no-padding` when the inner content (a dashboard mock,
   an iframe-style embed) brings its own spacing.
   ============================================ */
.uk-browser-mockup-content {
    padding: var(--space-lg);
}

.uk-browser-mockup--no-padding .uk-browser-mockup-content {
    padding: 0;
}

/* ============================================
   --dark — deeper chrome, for on-dark hero placement
   ============================================
   Production hero already sits on a dark page bg; the default chrome
   reads fine there. `--dark` is for cases where the mockup sits on a
   *gradient* or *image* hero and needs more contrast on the bar
   itself so the dots stay legible against the surface behind it.
   ============================================ */
.uk-browser-mockup--dark .uk-browser-mockup-bar {
    background: rgba(0, 0, 0, 0.55);
}