/* Dark first: it is read at 3 a.m. Light follows the phone's setting. */
:root {
    color-scheme: dark light;
    --bg: #0e1116;
    --text: #e6e8eb;
    --muted: #a3abb5;
    --surface: #1c2129;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f7f7f5;
        --text: #16181c;
        --muted: #535a63;
        --surface: #e6e6e1;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

main {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 48px;
}

.empty {
    color: var(--muted);
    font-size: 20px;
    text-align: center;
}

/* Pairing (AUTH-1): big type, big targets, one column. */
.pair { display: flex; flex-direction: column; gap: 16px; }
.pair h1 { font-size: 28px; margin: 0; }
.pair .help { color: var(--muted); margin: 0; }
.pair label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.pair input {
    font: inherit;
    font-size: 22px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--muted);
    background: transparent;
    color: var(--text);
}
.pair .code-input { text-transform: uppercase; letter-spacing: 0.15em; }
.pair button, button.link { font: inherit; min-height: 56px; border-radius: 14px; border: 0; }
.pair button { background: var(--text); color: var(--bg); font-size: 20px; font-weight: 600; }
.pair button:disabled { opacity: 0.5; }
.pair .error { color: var(--text); font-weight: 600; margin: 0; }
.pair .code { font: 600 44px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-align: center; margin: 16px 0; }
button.link { position: fixed; top: calc(env(safe-area-inset-top) + 8px); right: 16px; min-height: 44px; padding: 0 12px; background: transparent; color: var(--muted); font-size: 15px; }

/* Offline banner (HUB-1): top of every screen, under the "Pair the other phone" link. The auto
   bottom margin keeps it at the top while main stacks the rest at the bottom, in thumb reach. */
.offline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 60px 0 auto;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--muted);
}
.offline span { color: var(--muted); }

/* Capture (CAP-1): one thumb, in the dark. Every target is at least 44 px; the main ones 56+.
   main stacks everything at the bottom, so the record buttons and Save sit in thumb reach. */
.log-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.log button, .log-buttons button, .saved button {
    font: inherit;
    border: 0;
    border-radius: 14px;
    color: var(--text);
    background: var(--surface);
    touch-action: manipulation;
}
.log-buttons .big { min-height: 72px; font-size: 24px; font-weight: 600; }
/* Sleep (CAP-2): the state reads under the name, so the button says where things stand. */
.log-buttons .sleep { padding: 8px 12px; }
.log-buttons .sleep .sub, .log .state { display: block; font-size: 17px; font-weight: 400; color: var(--muted); }
.log .state { font-size: 20px; color: var(--text); margin: 0; }
.log { display: flex; flex-direction: column; gap: 14px; }
.log h1 { font-size: 28px; margin: 0; }
.log .row { display: flex; flex-direction: column; gap: 6px; }
.log .row-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.log .row-label { color: var(--muted); }
.log .steps { display: flex; gap: 8px; }
.log .steps .chip { min-width: 64px; font-size: 22px; flex: 0 0 auto; }
.log output { color: var(--text); font-weight: 600; }
.log .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.log .chip { min-height: 48px; min-width: 52px; padding: 0 10px; font-size: 18px; flex: 1 0 auto; white-space: nowrap; }
.log [aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 600; }
.log button:disabled { opacity: 0.4; }
.log .actions { display: flex; gap: 12px; margin-top: 8px; }
.log .actions > button { min-height: 60px; font-size: 20px; }
.log .actions .secondary { flex: 1; }
.log .actions .primary { flex: 2; }
.log .choices { flex: 3; display: flex; flex-direction: column; gap: 12px; }
.log .choices .primary { min-height: 64px; font-size: 22px; font-weight: 600; }
.log .actions:has(.choices) { align-items: flex-end; }
.log .actions:has(.choices) .secondary { min-height: 64px; }
.primary { background: var(--text) !important; color: var(--bg) !important; font-weight: 600; }
.error { color: var(--text); font-weight: 600; margin: 0; }
.saved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    border: 1px solid var(--muted);
}
.saved button { min-height: 48px; padding: 0 18px; font-weight: 600; }