/* Homepage device views use the approved Calendar member cards and proposal paper. */
.hub-ui, .product-moment-screen, .preparation-screen, .bedroom-screen {
  --d-zone:#FBEEE3; --d-fold:#F2DBC4; --d-key:#A34F2C;
  --d-you:#2A6FE8; --d-emma:#288855; --d-mike:#764BBF;
  --d-you-soft:#E7EEFC; --d-emma-soft:#E6F2EB; --d-mike-soft:#F0EAF9;
  background:none; overflow:visible;
}
.device-note { position:relative; background:var(--d-zone); border-radius:16px 16px 0 16px; transform:rotate(-.8deg); padding:10px; box-shadow:0 8px 20px #A34F2C20; }
.device-note::before { content:""; position:absolute; top:-5px; left:33%; width:34%; height:11px; background:linear-gradient(104deg,#ffffff42,#ffffff9e,#ffffff94,#ffffff3d); transform:rotate(1.6deg); border-radius:2px; }
.device-note::after { content:""; position:absolute; right:0; bottom:0; width:16px; height:16px; background:linear-gradient(315deg,var(--d-fold) 50%,transparent 50%); }
.note-signal { width:6px; height:6px; border-radius:50%; background:#C56A45; flex:none; animation:note-breathe 3s ease-in-out infinite; }
@keyframes note-breathe { 50% { opacity:.45; } }
@media(prefers-reduced-motion:reduce) { .note-signal { animation:none; } }
.hub-ui .hub-ui-top { justify-content:flex-start; gap:5px; }
.hub-ui .hub-ui-brand { font-size:9px; letter-spacing:.1em; color:#6E655C; }
.hub-ui .hub-auto-label { margin-left:auto; font-size:9px; }
.hub-ui .hub-screen-title { font-size:clamp(12px,2.6cqw,18px); margin:7px 0; line-height:1.2; }
.hub-ui .hub-reminders { margin:6px 0; gap:4px; }
.hub-ui .hub-reminder, .hero-stage .hub-reminder { padding:4px 0; border-top:1px solid #A34F2C20; border-radius:0; background:none; }
.hub-ui .hub-reminder b { font-size:clamp(11px,2cqw,14px); }
.hub-ui .hub-reminder small { font-size:clamp(10px,1.8cqw,12px); }
.hub-ui .hub-reminder>span { display:none; }
.note-approval { display:flex; justify-content:flex-end; margin-top:7px; }
.note-approval span { border-radius:999px; background:#fff; color:var(--d-key); padding:4px 11px; font-size:10px; box-shadow:0 3px 10px #A34F2C20; }
.hub-scene .hub-ui { left:12.66%; top:35.75%; width:74.84%; height:36.12%; padding:8px; }
.product-moment.is-evening .product-moment-screen { left:21.70%; top:62.64%; width:52.50%; height:24.73%; }
.birthday-party .preparation-screen { left:6.70%; top:52.13%; width:42%; height:34.13%; }
.member-card { display:flex; align-items:center; gap:7px; padding:9px; border-radius:9px; margin-top:7px; background:#F3F0EB; }
.member-you { background:var(--d-you-soft); --member:var(--d-you); }
.member-emma { background:var(--d-emma-soft); --member:var(--d-emma); }
.member-mike { background:var(--d-mike-soft); --member:var(--d-mike); }
.member-avatar { display:flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--member); color:white; font:600 10px/1 var(--sans); }
.member-card p, .member-card strong { margin:0; font:500 clamp(11px,2.6cqi,16px)/1.3 var(--device-sans); }
.bedroom-screen { padding:.4cqi; }
.bedroom-screen>span { display:flex; gap:4px; align-items:center; }
.bedroom-screen img { width:10px; height:10px; }
.bedroom-screen .member-card { padding:.4cqi; gap:.3cqi; margin-top:.4cqi; }
.bedroom-screen .member-avatar { width:1.3cqi; height:1.3cqi; font-size:.7cqi; }
.bedroom-screen .member-card strong { font-size:.7cqi; }
@media(max-width:760px) {
  .hub-scene .hub-ui, .product-moment .product-moment-screen, .product-moment.is-morning .product-moment-screen,
  .birthday-party .preparation-screen, .bedroom-screen {
    position:static; width:auto; height:auto; transform:none; margin:12px 0 0;
    padding:16px; background:#FBF7F1; border:1px solid var(--line); border-radius:10px;
  }
  .hub-scene .device-note { padding:14px; }
  .hub-scene .hub-ui-brand, .hub-scene .hub-auto-label { font-size:12px; }
  .hub-scene .hub-screen-title { font-size:18px; }
  .hub-scene .hub-reminder b { font-size:15px; }
  .hub-scene .hub-reminder small, .hub-scene .note-approval span { font-size:12px; }
  .hub-scene .hub-reminder { padding:8px 0; }
  .member-card p, .member-card strong { font-size:15px; }
  .moment-screen-meta, .preparation-screen-time, .birthday-party .preparation-screen-time,
  .preparation-screen-brand, .bedroom-screen>span { font-size:12px; }
  .bedroom-screen .member-card { padding:9px; gap:7px; margin-top:7px; }
  .bedroom-screen .member-avatar { width:20px; height:20px; font-size:10px; }
  .bedroom-screen .member-card strong { font-size:15px; }
  .bedroom-screen img { width:16px; height:16px; }
}