/* Phone surface: Andrea's pocket decisions. */
.phone { background: var(--bg); }
.phone-status { background: var(--aare); color: var(--on-aare); }
.phone .app-head { padding-top: var(--s-1); }
.phone .app-head .row1 { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.phone .app-head h1 { font-size: 2.1rem; }
.phone .app-head p { color: var(--on-aare-muted); font-size: var(--t-14); margin-top: 4px; }
.phone .view { display: none; }
.phone .view.on { display: block; animation: rise var(--dur-3) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.m-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); background: var(--surface); margin-bottom: 8px; text-align: left; width: 100%; }
.m-card i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: var(--surface); background: var(--c); }
.m-card b { font-size: var(--t-15); display: block; line-height: 1.3; }
.m-card .ln2 { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--t-13); color: var(--muted); gap: 8px; align-items: center; }
.m-card .amt { font-family: var(--font-display); font-size: var(--t-22); color: var(--ink); }
.m-sec { font-size: var(--t-12); font-weight: 700; color: var(--muted); margin: var(--s-5) 0 var(--s-2); }

/* decision sheet contents */
.sheet .figure { font-size: 3rem; margin-top: var(--s-3); }
.sheet .facts > div { grid-template-columns: 88px minmax(0, 1fr); font-size: var(--t-14); }
.hold { position: relative; width: 100%; height: 60px; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: var(--t-16); font-weight: 700; overflow: hidden; margin-top: var(--s-5); touch-action: none; user-select: none; -webkit-user-select: none; }
.hold::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 120ms linear; }
.hold.pressing::before { transform: scaleX(1); transition: transform 900ms linear; }
.hold span { position: relative; z-index: 1; }
.hold.pressing span { color: var(--on-accent); }
.m-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.m-done { text-align: center; padding: var(--s-6) 0; }
.m-done svg { margin: 0 auto var(--s-3); color: var(--success-ink); }
.offline-bar { background: var(--warning-soft); color: var(--warning-ink); font-size: var(--t-13); padding: 8px var(--app-gutter); display: none; gap: 8px; align-items: center; }
.phone.offline .offline-bar { display: flex; }
.phone-caption .cluster { margin-top: var(--s-4); }