/* Shared shell on top of vendored Bootstrap 5.3. Safe-area padding and
   experiment-specific readouts/status chips live here; layout, colour, and
   the hamburger nav come from Bootstrap. */

body {
    min-height: 100vh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main.container {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.btn {
    min-height: 44px;
}

.navbar .nav-link.active {
    font-weight: 600;
}

/* Bootstrap 5.3 sets --bs-navbar-toggler-icon-bg on .navbar only. Safari and
   some Chromium forks (Vivaldi) do not inherit that url() onto
   .navbar-toggler-icon in light mode, so the bars vanish. Same SVG Bootstrap
   ships; applied on the icon itself (see twbs/bootstrap#39597). */
.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.connection-info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

.transport-chip {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
}

.transport-chip:not(:empty)::before {
    content: "via ";
    font-weight: 400;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    font-size: 0.9rem;
    font-weight: 600;
}

.status-badge::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--bs-warning);
}

.status-badge[data-state="connected"]::before {
    background: var(--bs-success);
}

.status-badge[data-state="disconnected"]::before {
    background: var(--bs-danger);
}

.readout-value {
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.error-banner:empty {
    display: none;
}

.permission-state[data-state="active"] {
    color: var(--bs-success);
}

.permission-state[data-state="denied"] {
    color: var(--bs-danger);
}

.permission-state[data-state="needed"] {
    color: var(--bs-warning-text-emphasis);
}

.enable-button[hidden],
.enable-button:disabled {
    display: none;
}

.device-details .detail-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.device-details dt {
    opacity: 0.7;
    flex-shrink: 0;
}

.device-details dd {
    margin: 0;
    text-align: right;
    word-break: break-word;
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
}

/* Bootstrap 5.3 sign-in example (docs/5.3/examples/sign-in), username
   instead of email. Logo omitted. */
.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[name="username"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[name="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#preview,
#still {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
    object-fit: contain;
}

#still:not([hidden]) {
    height: auto;
}