/* ── Piclu Stylesheet — base, layout, page chrome ────────────────────────
 *
 * Layered:
 *   1. tokens.css      design tokens (CSS custom properties)
 *   2. components.css  reusable primitives (button, input, card, pill, …)
 *   3. style.css       this file — base reset, layout, page chrome
 *
 * HTML files link all three in order. style.css contains nothing that could
 * be lifted into components.css; everything here is page-shape, not pattern.
 *
 * Charter §7: "The hero is the list, not the product. Most screens have no
 * imagery at all." Everything below is in service of that.
 */

* { box-sizing: border-box; }

/* Skip-link — visible only on keyboard focus. Lets a tab user jump past the
 * header chrome to the page's main content in one keypress. */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-fg);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    z-index: 100;
}
.skip-link:focus-visible {
    top: var(--space-3);
    box-shadow: var(--shadow-focus);
    outline: none;
    color: var(--color-bg);
}

html, body { background: var(--color-bg); }

body {
    margin: 0;
    color: var(--color-fg);
    font: var(--text-base)/var(--leading-body) var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Header ──────────────────────────────────────────────────────────────
 *
 * Quiet, breathing-room. Title left, nav inline, account chip right. */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
    flex-wrap: wrap;
}

header h1 {
    margin: 0;
    font: var(--weight-semibold) var(--text-md)/1 var(--font-sans);
    color: var(--color-fg);
    letter-spacing: -0.01em;
}

#user-info {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
#user-info b {
    color: var(--color-fg);
    font-weight: var(--weight-medium);
}

/* Header chrome links (e.g. Sign out) read quieter than inline reveal-style
 * .linky inside content panels — drop the default underline so the header is
 * a single muted register, with hover revealing interaction. */
header .linky { text-decoration: none; }
header .linky:hover { text-decoration: underline; }

#logo a {
    color: var(--color-fg);
    text-decoration: none;
}

/* ── Top nav (Recordings / Devices) ─────────────────────────────────── */

.topnav {
    display: inline-flex;
    gap: var(--space-4);
    margin-left: var(--space-4);
}
.topnav a {
    text-decoration: none;
    color: var(--color-fg-muted);
    font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--motion-quick), border-color var(--motion-quick);
}
.topnav a:hover { color: var(--color-fg); }
.topnav a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}
.topnav a.active {
    color: var(--color-fg);
    border-bottom-color: var(--color-accent);
}

/* ── Main canvas ────────────────────────────────────────────────────── */

main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

h2 {
    margin: 0 0 var(--space-3);
    font: var(--weight-semibold) var(--text-lg)/var(--leading-tight) var(--font-sans);
    color: var(--color-fg);
    letter-spacing: -0.01em;
}

h3 {
    margin: 0 0 var(--space-3);
    font: var(--weight-semibold) var(--text-base)/1.3 var(--font-sans);
    color: var(--color-fg);
}

p { margin: 0 0 var(--space-3); }

/* Bare anchors get a default appearance via :where() so component classes
 * (.btn-primary, .topnav a, .linky, etc.) always win on the cascade without
 * defensive per-component overrides. The just-fixed CTA hover-collapse was
 * the warning shot — keep this generic rule at zero specificity. */
:where(a) {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
:where(a:hover) { color: var(--color-accent-soft); }

form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Recordings: controls strip ─────────────────────────────────────── */

#recordings-controls {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-2) 0 var(--space-4);
    flex-wrap: wrap;
}

#filter-chips {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.status-strip,
#status-strip {
    min-height: 32px;
    margin-bottom: var(--space-3);
}

/* ── Setup status panel (devices.html) ───────────────────────────────────
 *
 * Single live-updating line that replaces the previous step-by-step BLE
 * checklist. Charter §5.1: quiet competence over performative magic. */

.setup-status,
.setup-success,
.setup-error {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--text-base);
}
.setup-status  { background: var(--color-accent-quiet); color: var(--color-fg);  border-color: var(--color-accent-quiet); }
.setup-success { background: var(--color-ok-bg);        color: var(--color-ok);  border-color: var(--color-ok); }
.setup-error   { background: var(--color-err-bg);       color: var(--color-err); border-color: var(--color-err); }

/* Offline banner on /recordings — appears after a sustained SSE disconnect
 * (15s grace timer). Charter §6 don't lie — tells the user the data they're
 * looking at may be stale, instead of caching a misleading shell. */

.offline-banner {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warn-bg);
    color: var(--color-warn);
    border: 1px solid var(--color-warn);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* Install CTA — appears under the success state on devices.html. Charter
 * §5.3 earned-right-to-speak: shown only after first successful setup, only
 * if installation is actually available, and only once (localStorage gate
 * prevents re-pestering). Title is the proposition; buttons are the verbs. */

.install-cta {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-accent-quiet);
    border-radius: var(--radius-md);
}
.install-cta-title {
    margin: 0 0 var(--space-3);
    font: var(--weight-semibold) var(--text-base)/1.4 var(--font-sans);
    color: var(--color-fg);
}

/* Technical-details disclosure — collapsed by default; opt-in for the rare
 * diagnostic moment. Charter §5.5: defaults strong; overrides one tap. */

.setup-details {
    margin-top: var(--space-4);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
}
.setup-details summary {
    cursor: pointer;
    color: var(--color-fg-muted);
    user-select: none;
}
.setup-details summary:hover { color: var(--color-fg); }
.setup-details summary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}
.setup-details dl {
    margin: var(--space-3) 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
}
.setup-details dt { color: var(--color-fg-muted); }
.setup-details dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-all;
}

/* ── Login page ──────────────────────────────────────────────────────────
 *
 * Standalone page — no <header>, vertically centred, single point of colour
 * (the CTA). Type-led wordmark; tagline is factual not poetic; error message
 * appears above the CTA when ?error=… is present.
 *
 * Charter Stage 1 brand-encounter: the user's first Piclu pixel before
 * Google's consent screen. Restraint as proof of charter. */

body.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-main {
    width: 100%;
    max-width: 380px;
    padding: var(--space-5);
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.login-wordmark {
    margin: 0 0 var(--space-3);
    font: var(--weight-semibold) var(--text-xl)/1 var(--font-sans);
    color: var(--color-fg);
    letter-spacing: -0.02em;
}

/* Charter Stage-1 promise. Sits between wordmark and CTA — declares what
 * the product does in the user's voice, before the action. Slightly larger
 * than body, slightly muted to keep restraint, italics avoided. */
.login-promise {
    margin: 0 0 var(--space-5);
    color: var(--color-fg);
    font: var(--weight-regular) var(--text-md)/1.4 var(--font-sans);
}

.login-cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 12px 18px;
}

.login-error {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-err-bg);
    color: var(--color-err);
    border: 1px solid var(--color-err);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    text-align: left;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    header {
        padding: var(--space-3) var(--space-4);
    }
    .topnav {
        margin-left: 0;
        width: 100%;
        order: 3;
    }
    main {
        padding: var(--space-4) var(--space-3);
    }
    .rec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .btn-delete { margin-left: 0; align-self: stretch; }
}