/* Live-data UI shared by the dashboard, create, events and settings/account pages (data.js).
   Linked from those partials; uses only app.css tokens. */

/* Sample wireframe content stays invisible until data.js has filled the container (no flash of fake data). */
[data-bind]:not([data-bound]) { visibility: hidden; }

.stat .delta.is-empty { color: var(--muted); }
.lw-self-start { align-self: flex-start; }
.lw-pad { padding: 8px 10px; }
.book-row.lw-empty { border-bottom: 0; padding-bottom: 0; }
.book-row.lw-empty .btn { flex: none; }
.bars.lw-bars-empty > span { background: var(--surface-high); }
a.check-row:hover span:last-child { color: var(--rust-ink); }
.lw-empty-editor { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0 16px; }
.lw-book-select { width: auto; max-width: 220px; padding: 9px 12px; }
.lw-share { display: flex; flex-direction: column; gap: 10px; }
.lw-share .input { color: var(--ink-soft); font-size: 13px; }

/* Modal dialogs (new book, create event) */
.lw-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: auto; padding: 24px; color: var(--ink); }
.lw-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.lw-form { display: flex; flex-direction: column; gap: 14px; }
.lw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lw-radios { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.lw-radios legend { width: 100%; margin-bottom: 6px; padding: 0; }
.lw-radios label { display: inline-flex; align-items: center; gap: 8px; }
.lw-radios input { accent-color: var(--rust-bright); }
.lw-actions { display: flex; justify-content: flex-end; gap: 10px; }
.lw-status:empty { display: none; }
.lw-form .input:focus-visible, .lw-card-form .input:focus-visible { outline: 2px solid var(--rust-bright); outline-offset: 1px; }

/* Settings/account forms */
.lw-card-form { display: flex; flex-direction: column; gap: 12px; }
.lw-card-form[hidden], [data-bind][hidden], [data-when][hidden], [data-action][hidden] { display: none !important; }
.lw-inline { display: flex; gap: 10px; align-items: flex-end; }
.lw-inline .field { flex: 1 1 0; min-width: 0; }
.set-card .lw-card-form .input { color: var(--ink); }
.lw-guest-card { border-color: var(--rust-bright); }
.lw-note:empty { display: none; }

@media (max-width: 767px) {
  .lw-grid { grid-template-columns: 1fr; }
  .lw-inline { flex-direction: column; align-items: stretch; }
  .lw-dialog { padding: 18px; }
}