/*
 * Nestwatch app additions on top of design/nestwatch.css (tokens and components stay
 * there; this file only lays out screens).
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

body { min-height: 100vh; }
.app { min-height: 100vh; }
.page.narrow { max-width: 560px; }

/* Top bar (mockup .topbar) */
.app-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Listener layout: tiles plus settings side panel (mockup .side) */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.layout.with-panel { grid-template-columns: minmax(0, 1fr) 330px; }
.layout.with-panel .tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tiles { align-content: start; }
.tile .actions .settings-btn { flex: none; }
.panel { position: sticky; top: var(--space-4); }
.footnote { text-align: center; }
.empty { align-items: flex-start; }

/* Welcome */
.welcome { max-width: 720px; padding-top: var(--space-7); }
.hero-brand { align-items: flex-start; }
.role-choice { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.role-card { text-align: left; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2); min-height: 44px; }
.role-card:hover { border-color: var(--honey); }
.disclaimer { color: var(--text-1); }
.card.disclaimer { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); }

/* Notices (alerts) */
.notices { position: fixed; top: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); width: min(560px, calc(100% - 2 * var(--space-4))); pointer-events: none; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); pointer-events: auto; }
.notice .pill { white-space: normal; font-size: var(--text-s); }
.pill.plain { background: var(--ink-2); }

/* Browser audio prompt (platforms.md §2.5) */
.audio-prompt { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 100%; cursor: pointer; color: var(--honey); font: inherit; border-color: var(--honey); }
.audio-prompt strong { font-size: var(--text-l); }

/* Lists */
.list-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Forms */
.field .label { font-size: var(--text-s); font-weight: 600; color: var(--text-2); }
.switch-row { cursor: pointer; min-height: 44px; }
.error { color: var(--coral); }
.card.error { border-color: color-mix(in srgb, var(--coral) 55%, transparent); }
.segmented { max-width: 100%; overflow-x: auto; }
.segmented button { white-space: nowrap; }
.btn[disabled], .segmented button[disabled] { opacity: 0.5; cursor: not-allowed; }
.centered { text-align: center; align-items: center; }
.full { width: 100%; }
.confirm { padding: var(--space-4); }
.nearby { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink-3); color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.nearby[aria-pressed="true"] { color: var(--lavender); }
.nearby[disabled] { cursor: default; opacity: 0.8; }

/* Station */
.indicators { min-height: 26px; }
.hero { display: grid; place-items: center; padding: var(--space-3) 0; }
.ring.no-tick::after { display: none; }
.ring.small { width: 180px; height: 180px; }
.ring.small .value strong { font-size: 34px; }
.battery.low { color: var(--amber); }
.dim-screen { position: fixed; inset: 0; z-index: 50; background: var(--ink-0); color: var(--text-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; cursor: pointer; }
.listeners .row-between { min-height: 32px; }
.fingerprint { word-break: break-all; font-size: var(--text-xs); }

/* Sheets */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.overlay .sheet { width: min(560px, 100%); max-height: 92vh; overflow: auto; }
.pairing { align-items: center; text-align: center; }
.pairing .qr svg { display: block; }
.link-row { width: 100%; text-align: left; }
.link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lavender); font-size: var(--text-xs); }
.just-paired { width: 100%; text-align: left; }
.verify-card .verify { font-size: var(--text-xxl); }

/* Calibration chart */
.calibrate { touch-action: none; cursor: ns-resize; }
.calibrate > * { pointer-events: none; }
.calibrate .level-line { fill: none; stroke: var(--sage); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Camera */
.video .video-message { position: absolute; left: 0; right: 0; bottom: var(--space-3); text-align: center; color: #f3efe8; font-size: var(--text-s); }
.video .placeholder { background: radial-gradient(circle at 60% 40%, #3b3446, #121019 70%); }

/* Phones */
@media (max-width: 760px) {
  .page { padding: var(--space-4); }
  .layout.with-panel { grid-template-columns: minmax(0, 1fr); }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; max-height: 85vh; overflow: auto; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .station .bottom-actions { margin-top: var(--space-4); }
  .segmented button { padding: 8px 10px; }
}