/* Frames page chrome (/frames) — the standalone mobile surface only; the comb
   itself is styled by frames.css. Mobile-first: the base rules target a phone. */

/* hive-components.css makes the DASHBOARD a non-scrolling app shell, and those
   rules are not scoped, so /frames inherited overflow:hidden and could not
   scroll. Undo it — this page is an ordinary document. See docs/structure.md. */
body.frames-page {
    height: auto;
    min-height: 100dvh;      /* dvh, not vh — vh sits under mobile browser chrome */
    overflow: visible;
    display: block;          /* not the shell's flex column */
    margin: 0;
    background: var(--bg-body);
    color: var(--text-primary);
}

/* header */

/* Header and toolbar stick together as one block, so the toolbar never needs to
   guess the header's height. */
.frames-page-top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-body);
}

.frames-page-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bg-nav);
    color: #fff;
    padding: .55rem .75rem;
    /* Clear the notch / status bar when installed as a PWA. */
    padding-top: calc(.55rem + env(safe-area-inset-top));
    padding-left: calc(.75rem + env(safe-area-inset-left));
    padding-right: calc(.75rem + env(safe-area-inset-right));
}

.frames-page-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.frames-page-logo {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

.frames-page-title {
    font-weight: 600;
    line-height: 1.1;
}

.frames-page-sub {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    opacity: .75;
}

.frames-page-switch {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Connection dot. Shape doesn't change, only colour — it's decorative; the
   authoritative signal is each cell dimming when its device is unreachable. */
.frames-conn {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--muted);
}

.frames-conn.is-up {
    background: var(--ok);
}

.frames-conn.is-down {
    background: var(--bad);
}

/* Presence badge — sits in the same status line as the connection dot.
   Full opacity (overriding .frames-page-sub's .75): this one's a tappable
   control, not decorative status text, and needs to read as such. */
#presence-badge-host {
    opacity: 1;
    margin-left: .35rem;
}

#presence-badge-host .badge {
    font-size: .65rem;
    padding: .25em .5em;
}

#presence-badge-host #presence-badge-btn {
    /* The visible glyph is small, but the tap target isn't. */
    padding: .4rem;
    margin: -.4rem;
}


.frames-page-main {
    padding: .75rem;
    padding-left: calc(.75rem + env(safe-area-inset-left));
    padding-right: calc(.75rem + env(safe-area-inset-right));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.frames-page .frames-toolbar {
    /* No sticky/top here — .frames-page-top handles it for header + toolbar
       together, so there's no header-height magic number to drift. */
    background: var(--bg-body);
    padding: .5rem .75rem;
    padding-left: calc(.75rem + env(safe-area-inset-left));
    padding-right: calc(.75rem + env(safe-area-inset-right));
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

.frames-page #framesSelect {
    max-width: 190px;
}

/* Frame tabs sit in the sticky top block on mobile, so switching section never
   requires scrolling back up. */
.frames-page .frame-tabs {
    margin-bottom: .75rem;
}

.frames-page .frame-tab {
    min-height: 38px;
}

/* Touch targets: 44px is the accessible minimum, and these are the controls
   you hit one-handed while walking through the house. */
.frames-page .frames-toolbar .btn,
.frames-page .cell-controls .btn {
    min-height: 40px;
}

.frames-page .cell-setpoint .btn {
    min-width: 40px;
}

/* A slightly taller slider track is far easier to hit with a thumb. */
.frames-page .cell-slider {
    height: 1.6rem;
}

/* wider screens */

@media (min-width: 768px) {
    .frames-page-main {
        max-width: 1100px;
        margin: 0 auto;
        padding: 1rem;
    }

    .frames-page-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}