/* Dawni app mock-up: phone frames and app-only components. Builds on ../shared/dawni.css. */
body.board { background-color:var(--oat); }
.board-head { display:flex; gap:40px; align-items:flex-start; padding-top:44px; padding-bottom:20px; max-width:1500px; }
.board-head img { height:47px; width:auto; flex:none; margin-top:8px; }
.board-head h1 { font-size:clamp(2rem, 3.4vw, 2.8rem); }
.board-head p { max-width:62em; }
.board-foot { max-width:1500px; padding-bottom:40px; }
.screens-grid { display:flex; flex-wrap:wrap; gap:48px 40px; padding:28px 40px 60px; justify-content:center; }
.shot { margin:0; display:flex; flex-direction:column; gap:14px; }
.shot figcaption { font-weight:700; font-size:.95rem; letter-spacing:.02em; }
.shot figcaption .n { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--clay); margin-right:8px; }

.phone { width:390px; height:844px; border-radius:52px; padding:0; position:relative; overflow:hidden; background:var(--linen);
  box-shadow:0 0 0 10px var(--night), 0 0 0 11px #4a3550, 0 40px 80px -40px rgba(31,20,36,.55); margin:11px; }
.scr { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; font-size:.95rem; line-height:1.55; }
.scr::before { content:""; position:absolute; top:11px; left:50%; width:118px; height:34px; margin-left:-59px; border-radius:20px; background:#0d0910; z-index:5; }
.scr::after { content:""; position:absolute; bottom:8px; left:50%; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:currentColor; opacity:.55; z-index:5; }
.scr-linen { background:var(--linen); background-image:var(--grain-soft); color:var(--espresso); }
.scr-sunrise { background:linear-gradient(180deg, var(--champagne) 0%, var(--blush) 45%, var(--linen) 100%); color:var(--espresso); }
.scr.dawn, .scr.dusk { position:absolute; }
.status { height:54px; flex:none; display:flex; justify-content:space-between; align-items:center; padding:6px 30px 0 34px; font-weight:700; font-size:.92rem; color:var(--linen); position:relative; z-index:6; }
.status.dark { color:var(--espresso); }
.sb-left { display:inline-flex; align-items:center; gap:8px; }
.sb-icons { width:64px; height:12px; background:
  linear-gradient(currentColor,currentColor) 0 8px/3px 4px no-repeat, linear-gradient(currentColor,currentColor) 5px 5px/3px 7px no-repeat,
  linear-gradient(currentColor,currentColor) 10px 2px/3px 10px no-repeat, linear-gradient(currentColor,currentColor) 15px 0/3px 12px no-repeat;
  position:relative; }
.sb-icons::after { content:""; position:absolute; right:0; top:0; width:26px; height:12px; border:1.5px solid currentColor; border-radius:4px; box-sizing:border-box; background:linear-gradient(currentColor,currentColor) 2px 2px/16px 5px no-repeat; }
.pad { flex:1; padding:6px 22px 96px; overflow:hidden; display:flex; flex-direction:column; gap:14px; }
.center-col .mid-stack { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 34px 60px; gap:4px; }
.mid-stack h2 { font-size:2rem; margin:14px 0 6px; }
.scr h2 em { font-style:italic; color:var(--clay); }
.on-dark h2 em { color:var(--champagne); }
.bar { width:160px; height:3px; border-radius:2px; background:var(--hair); overflow:hidden; margin-top:18px; }
.bar span { display:block; height:100%; width:62%; background:var(--clay); border-radius:2px; }

/* Onboarding */
.onb { padding:30px 30px 0; display:flex; flex-direction:column; gap:10px; position:relative; z-index:3; }
.onb-mark { width:132px; height:auto; margin-bottom:22px; }
.onb h2 { font-size:2.35rem; color:var(--linen); margin:0; }
.onb p { color:#F1E4DA; margin:4px 0 0; }
.pager { list-style:none; display:flex; gap:8px; padding:0; margin:14px 0 6px; }
.pager li { width:8px; height:8px; border-radius:4px; background:rgba(243,227,195,.35); }
.pager li.on { width:24px; background:var(--champagne); }
.onb-cta { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.sun-sm { position:absolute; left:50%; bottom:-120px; width:280px; height:280px; margin-left:-140px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #FFF1D6 0%, #F6C98F 38%, #E0894A 70%, rgba(224,137,74,0) 71%); box-shadow:0 0 100px 30px rgba(246,201,143,.35); }
.scr .horizon { position:absolute; left:0; right:0; bottom:118px; height:1px; background:linear-gradient(90deg, transparent, rgba(243,227,195,.8), transparent); }
.scr .sun-sm { bottom:-22px; }
.onb-wren { position:absolute; left:50%; bottom:112px; margin-left:-64px; z-index:4; }

/* Home */
.topbar { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.hello { margin:0; font-size:1.05rem; }
.next { border-radius:26px; padding:22px 22px 18px; }
.next .eyebrow { margin:0; }
.on-gold { color:var(--gold) !important; }
.big-time { font-family:var(--serif); font-size:4.2rem; font-weight:330; line-height:1; margin:8px 0 6px; color:var(--linen); letter-spacing:-.02em; }
.next-date { margin:0 0 8px; color:#EADCE6; }
.on-dark-switch { color:var(--linen); min-height:40px; }
.quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick .btn { width:100%; }
.card-s { background:var(--white); border:1px solid var(--hair); border-radius:18px; padding:14px 16px; }
.card-s h3 { font-size:1.05rem; margin:0 0 4px; }
.card-s p { margin:0; }
.sec-h { font-size:1.05rem; margin:2px 0 6px; }
.rows { list-style:none; margin:0; padding:0; }
.rows li { display:flex; justify-content:space-between; padding:9px 2px; border-top:1px solid var(--hair); font-size:.92rem; }
.rows li strong { font-family:var(--serif); font-weight:450; }
.tabs { position:absolute; left:0; right:0; bottom:0; height:84px; padding:8px 14px 22px; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(251,246,239,.94); border-top:1px solid var(--hair); z-index:4; }
.tabs a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.7rem; font-weight:700; color:var(--mauve); text-decoration:none; }
.tabs a[aria-current="page"] { color:var(--plum); }
.tabs i { width:22px; height:22px; display:block; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.ic-home { --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-clock { --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2M5 4L2 7M19 4l3 3'/%3E%3C/svg%3E"); }
.ic-log { --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3C/svg%3E"); }
.ic-gear { --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }

/* Wake time */
.navbar { display:grid; grid-template-columns:44px 1fr auto; align-items:center; min-height:44px; gap:8px; }
.navbar h2 { font-size:1.4rem; margin:0; text-align:center; }
.navbar > span:last-child:empty { width:44px; }
.back { font-size:1.4rem; text-decoration:none; color:var(--plum); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.time-pick { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.time-pick input[type=time] { font-size:3.4rem; border:0; background:transparent; padding:0; text-align:center; width:190px; min-height:0; }
.round { width:48px; height:48px; border-radius:50%; border:1px solid var(--hair-strong); background:var(--white); font:inherit; font-size:1.4rem; color:var(--plum); cursor:pointer; }
.scr .field { margin-bottom:0; }
.scr .chips { grid-template-columns:repeat(7, 1fr); gap:6px; }
.scr .chips label { min-height:44px; }
.kv { display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--hair); font-size:.92rem; }
.kv:first-of-type { border-top:0; }
.mini-tl { list-style:none; margin:10px 0 0; padding:0; display:flex; justify-content:space-between; position:relative; }
.mini-tl::before { content:""; position:absolute; left:8px; right:8px; top:5px; height:1px; background:var(--hair-strong); }
.mini-tl li { font-size:.66rem; font-weight:700; color:var(--mauve); text-align:center; position:relative; }
.mini-tl li::before { content:""; display:block; width:9px; height:9px; border-radius:50%; background:var(--plum); margin:1px auto 5px; position:relative; }
.mini-tl li.first::before { background:var(--saffron); }
.mini-tl li.give::before { background:var(--linen); border:2px solid var(--clay); width:7px; height:7px; }

/* Voice */
.voice-list { display:flex; flex-direction:column; gap:10px; }
.vopt input { position:absolute; opacity:0; width:1px; height:1px; }
.vopt label { display:grid; grid-template-columns:1fr auto; gap:4px 10px; border:1px solid var(--hair); border-radius:18px; padding:14px 16px; background:var(--white); cursor:pointer; }
.vopt input:checked + label { border-color:var(--plum); box-shadow:inset 0 0 0 1px var(--plum); }
.vopt input:focus-visible + label { outline:2px solid var(--plum); outline-offset:3px; }
.vopt .vn { font-family:var(--serif); font-size:1.15rem; font-weight:450; }
.vopt .vn i { font-style:italic; color:var(--clay); margin-right:6px; }
.vopt .vb { grid-column:1 / -1; font-size:.82rem; color:var(--mauve); }
.vopt q { grid-column:1 / -1; font-family:var(--serif); font-style:italic; font-size:.93rem; line-height:1.45; quotes:"\201C" "\201D"; }
.vopt .play { font-size:.75rem; font-weight:700; color:var(--plum); border:1px solid var(--hair-strong); border-radius:999px; padding:3px 10px; align-self:start; }
.vopt .tick { display:none; }

/* Call screens */
.call { text-align:center; }
.caller-id { padding:30px 24px 0; position:relative; z-index:2; }
.call-kind { margin:0; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.caller-id h2 { font-size:2.8rem; margin:6px 0 2px; color:var(--linen); }
.call-num { margin:0; color:#EADCE6; font-size:.86rem; }
.call-wren { position:relative; width:220px; height:220px; margin:34px auto 0; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle, rgba(251,246,239,.16), rgba(251,246,239,.04) 70%); }
.pulse { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(243,227,195,.55); animation:pulse 2.6s var(--ease) infinite; }
.pulse.p2 { animation-delay:1.3s; }
@keyframes pulse { from { transform:scale(.9); opacity:.9; } to { transform:scale(1.35); opacity:0; } }
.call-line { font-family:var(--serif); font-style:italic; color:var(--champagne); font-size:1.15rem; margin:30px 30px 0; }
.call-btns { margin-top:auto; display:flex; justify-content:space-around; padding:0 40px; }
.call-btns > div { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.85rem; color:var(--linen); }
.cbtn { width:74px; height:74px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; color:#fff; }
.cbtn.decline { background:#B8423A; }
.cbtn.accept { background:var(--sage); }
.call-foot { font-size:.78rem; color:#E6D5DF; margin:18px 30px 40px; text-align:center; }
.incall-head { display:flex; align-items:center; gap:14px; padding:24px 26px 0; }
.incall-head h2 { font-size:1.8rem; margin:0; color:var(--linen); }
.transcript { list-style:none; margin:20px 22px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.transcript li { font-family:var(--serif); font-style:italic; font-size:1rem; line-height:1.45; color:#E6D5DF; background:rgba(251,246,239,.07); border-radius:16px 16px 16px 4px; padding:10px 14px; }
.transcript li.now { color:var(--linen); background:rgba(243,227,195,.18); box-shadow:inset 0 0 0 1px rgba(243,227,195,.4); }
.keypad { display:grid; grid-template-columns:repeat(3, 68px); gap:14px 26px; justify-content:center; margin-top:auto; }
.key { width:68px; height:68px; border-radius:50%; border:0; background:rgba(251,246,239,.12); color:var(--linen); font:400 1.7rem/1 var(--serif); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.key small { font:700 .55rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.key.hot { background:var(--champagne); color:var(--plum); box-shadow:0 0 0 6px rgba(243,227,195,.25); }
.scr.dusk .call-foot { margin-bottom:36px; }

/* Success */
.bye { margin:14px 0 22px; font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.5; color:var(--plum); }
.bye small { display:block; font-family:var(--sans); font-style:normal; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mauve); margin-top:6px; }

/* Log */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stats div { background:var(--white); border:1px solid var(--hair); border-radius:16px; padding:10px 8px; text-align:center; }
.stats b { display:block; font-family:var(--serif); font-weight:400; font-size:1.7rem; line-height:1.1; color:var(--plum); }
.stats span { font-size:.7rem; color:var(--mauve); font-weight:600; }
.log { list-style:none; margin:0; padding:0; }
.log li { display:grid; grid-template-columns:56px 1fr auto; gap:2px 12px; padding:10px 2px; border-top:1px solid var(--hair); align-items:center; }
.log .d { font-weight:700; font-size:.82rem; line-height:1.2; }
.log .d small { display:block; font-weight:500; color:var(--mauve); }
.log .what { font-size:.88rem; line-height:1.35; }
.log .what small { display:block; color:var(--mauve); font-size:.76rem; }
.log .pill { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:3px 9px; }
.pill.up { background:#E3EDE6; color:var(--sage); }
.pill.miss { background:var(--blush); color:var(--error); }
.pill.skipped { background:var(--oat); color:var(--mauve); }

/* Empty */
.empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:0 14px 40px; }
.empty h3 { font-size:1.6rem; margin:16px 0 4px; }
.empty p { margin:0 0 16px; }

/* Settings */
.member { border-radius:22px; padding:18px 20px; }
.member-top { display:flex; justify-content:space-between; align-items:center; }
.member h3 { color:var(--linen); margin:0; font-size:1.25rem; }
.m-state { font-family:var(--serif); font-size:1.5rem; font-weight:350; color:var(--champagne); margin:8px 0 10px; }
.m-bar { height:4px; border-radius:2px; background:rgba(243,227,195,.25); }
.m-bar span { display:block; height:100%; border-radius:2px; background:var(--gold); }
.set-list { list-style:none; margin:0; padding:0; background:var(--white); border:1px solid var(--hair); border-radius:18px; }
.set-list li { display:flex; justify-content:space-between; gap:10px; padding:11px 16px; border-top:1px solid var(--hair); font-size:.88rem; }
.set-list li:first-child { border-top:0; }
.set-list strong { font-weight:700; text-align:right; }
.set-list .ok { color:var(--sage); }
.set-foot { display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; padding:0 4px; }
.set-foot .danger { color:var(--error); }

/* Notifications / lock screen */
.lock { background:radial-gradient(120% 60% at 50% 110%, rgba(240,179,126,.45), transparent 60%), linear-gradient(180deg, #1F1424 0%, #3A1F3D 60%, #6A2E3E 100%); color:var(--linen); }
.sb-glyph { color:var(--linen); }
.sb-glyph .wren-ph { border-width:1px; font-size:0; padding:0; }
.lock-time { text-align:center; margin-top:18px; }
.lock-time p { margin:0; font-weight:600; color:#EADCE6; }
.lock-time b { display:block; font-family:var(--serif); font-weight:300; font-size:5.4rem; line-height:1; letter-spacing:-.02em; }
.notes { list-style:none; margin:34px 14px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.note-card { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:22px; background:rgba(251,246,239,.9); color:var(--espresso); }
.note-card .nb { border-radius:50%; background:var(--linen); }
.note-card .wren-ph { color:var(--clay); }
.note-card p { margin:0; font-size:.88rem; line-height:1.4; }
.nh { display:flex; justify-content:space-between; margin-bottom:2px !important; }
.nh span { color:var(--mauve); font-size:.76rem; }
.lock .call-foot { margin-bottom:40px; }

/* Small screens: the board becomes one column, frames fill the width */
@media (max-width:640px) {
  .board-head { flex-direction:column; gap:12px; padding-top:28px; }
  .screens-grid { padding:20px 0 40px; gap:36px; }
  .shot figcaption { padding:0 20px; }
  .phone { width:min(390px, calc(100vw - 22px)); margin:11px auto; border-radius:44px; }
}
@media (prefers-reduced-motion:reduce) { .pulse { display:none; } }
.head-marks { display:flex; flex-direction:column; gap:14px; align-items:flex-start; flex:none; }
.app-icon img { border-radius:22%; box-shadow:0 14px 30px -18px rgba(31,20,36,.6); }
@media (max-width:640px) { .head-marks { flex-direction:row; align-items:center; } .head-marks .wren { --wren-size:56px !important; } }
.time-pick input.hhmm { font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-size:3.4rem; border:0; background:transparent; padding:0; text-align:center; width:200px; min-height:0; color:inherit; font-variant-numeric:tabular-nums; }
.time-pick input.hhmm:focus-visible { outline:2px solid var(--ember, #b5482f); outline-offset:4px; border-radius:12px; }
.log .what { min-width:0; }
.log li > :last-child { justify-self:end; white-space:nowrap; }