/* Styles for the /demo "Today" web widget (app/javascript/demo_app). Scoped under
   #demo-app so the ported app classes never collide with the marketing page. Colour
   + font tokens (--sky, --ink, --font-article, …) come from landing.css :root, which
   /demo already loads; fonts are loaded by the layout. Mirrors the design handoff's
   app.css (Sky & Sun). */

#demo-app { display: block; }

.demo-phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 12px; }
.demo-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 36px; width: 100%; }
.demo-phone-note { font-size: 13px; line-height: 1.5; color: var(--ink-muted); text-align: center; max-width: 48ch; margin: 0; }
.demo-phone-disclaimer { font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); text-align: center; max-width: 48ch; margin: 0; }

#demo-app .u-screen {
  height: 100%; overflow-y: auto; background: var(--sky); color: var(--ink);
  font-family: var(--font-ui); position: relative; -webkit-font-smoothing: antialiased;
}
#demo-app .u-screen::-webkit-scrollbar { width: 0; }

#demo-app .eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sun-orange);
}
#demo-app .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#demo-app .serif { font-family: var(--font-article); }
#demo-app .jp { font-family: var(--font-jp); font-style: normal; }

/* Japanese-first: never the heavy serif, never italic. */
#demo-app [lang="ja"] .serif { font-family: var(--font-jp); font-style: normal; }

#demo-app .card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(28, 39, 48, 0.03), 0 6px 22px rgba(28, 39, 48, 0.07);
}

#demo-app .btn {
  font-family: var(--font-ui); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
#demo-app .btn:active { transform: scale(0.985); }