/* Lutin PWA — one screen, a grid of press buttons. */ * { box-sizing: border-box; } /* The hidden attribute must always win, even over classes that set their own display (e.g. .house-switch's flex) — without this, "hidden" elements render as empty styled bars. */ [hidden] { display: none !important; } /* Theme attribute lives on (documentElement): the inline head script sets it before exists so the first paint already has the right palette. */ :root[data-theme="light"] { --bg: #f8f8f6; --surface: #ffffff; --text: #1a1d18; --text-muted: #6b6f66; --border: #dedad2; --accent: #3a6b4c; --accent-bg: #e4efe6; --danger: #a5402f; --danger-bg: #f7e6e2; --shadow: rgba(20, 20, 15, 0.08); } :root[data-theme="dark"] { --bg: #1a1d18; --surface: #24281f; --text: #f2f1ec; --text-muted: #a3a89b; --border: #3a3f33; --accent: #7fbf95; --accent-bg: #2b3c2c; --danger: #e08573; --danger-bg: #3c2622; --shadow: rgba(0, 0, 0, 0.35); } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } #app { min-height: 100vh; display: flex; flex-direction: column; } /* ---- shared layout ---- */ .screen { flex: 1; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; width: 100%; } /* ---- health banner ---- */ .health-banner { background: var(--danger-bg); color: var(--danger); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; margin-bottom: 12px; text-align: center; } .health-banner[hidden] { display: none; } /* ---- login view ---- */ .login { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; text-align: center; } .login h1 { font-size: 28px; margin: 0; } .login form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; } .login input { font-size: 17px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-height: 44px; } .login input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .login button { font-size: 17px; font-weight: 600; padding: 14px 16px; border-radius: 12px; border: none; background: var(--accent); color: var(--surface); min-height: 44px; cursor: pointer; } .login button:disabled { opacity: 0.6; cursor: default; } .login button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .pairing-card { max-width: 360px; margin: 0 auto; } .pairing-details { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; } .pairing-details[hidden], .pairing-actions[hidden] { display: none; } .pairing-detail { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; } .pairing-key { color: var(--text-muted); } .pairing-value { font-weight: 600; text-align: right; } .pairing-actions { display: flex; gap: 12px; width: 100%; max-width: 340px; } .pairing-actions button { flex: 1; } .login .hint { color: var(--text-muted); font-size: 14px; min-height: 20px; } .login .debug-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: 0.1em; color: var(--accent); } /* ---- house switcher ---- */ .house-switch { display: flex; gap: 6px; background: var(--surface); border-radius: 12px; padding: 4px; margin-bottom: 16px; overflow-x: auto; } .house-switch button { flex: 1; white-space: nowrap; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 9px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; min-height: 36px; } .house-switch button.active { background: var(--accent-bg); color: var(--accent); } /* ---- account actions / integrations ------------------------------------- */ .account-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .account-button { margin-left: auto; font-size: 14px; font-weight: 700; padding: 9px 12px; min-height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .account-button:disabled { opacity: 0.6; cursor: default; } .account-status { font-size: 14px; padding: 8px 10px; border-radius: 999px; } .account-status.ok { color: var(--accent); background: var(--accent-bg); } .account-status.error { color: var(--danger); background: var(--danger-bg); } /* ---- empty state (rule lives with the other board states below) ---- */ .empty-state { grid-column: 1 / -1; min-height: 50vh; } .empty-title { font-size: 20px; font-weight: 700; color: var(--text); } /* ---- press grid ---- */ .press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); gap: 12px; padding: 4px 0; } .press-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 14px 8px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 1px 2px var(--shadow); transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } .press-button:active { transform: scale(0.96); } .press-button .icon { font-size: 34px; line-height: 1; } .press-button .name { font-size: 13px; font-weight: 600; text-align: center; overflow-wrap: anywhere; } .press-button.active { border-color: var(--accent); background: var(--accent-bg); } .press-button.pending { animation: pulse 1s ease-in-out infinite; } .press-button:disabled { cursor: default; } .press-button .flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 14px; background: var(--accent-bg); color: var(--accent); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .press-button .flash.show { opacity: 1; } .press-button.error { border-color: var(--danger); animation: shake 0.4s ease; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* ---- status line ---- */ .status-line { margin-top: 14px; min-height: 20px; text-align: center; font-size: 14px; color: var(--danger); } .status-line[hidden] { display: none; } .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); text-align: center; padding: 24px; } /* ---- logout ---- */ .logout-row { text-align: center; margin-top: auto; padding-top: 24px; } .logout-link { background: none; border: none; color: var(--text-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 8px; min-height: 44px; } /* ---- accessibility ---- */ .press-button:focus-visible, .house-switch button:focus-visible, .logout-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .press-button { transition: none; } .press-button:active { transform: none; } .press-button.pending, .press-button.error { animation: none; } .press-button.pending { opacity: 0.6; /* static stand-in for the pulse */ } .press-button .flash { transition: none; } }