/* Uphill components, version 3. Every value comes from a token. Type comes from the text style classes (title, heading, body, body-strong, detail, caption, figure). */
.up-page { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.up-page button { cursor: pointer; }
.detail, .caption { color: var(--text-secondary); }
.up-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.up-card { box-sizing: border-box; background: var(--card); color: var(--text); border-radius: var(--radius-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.up-card--list { padding: 0; gap: 0; overflow: hidden; }
.up-row { box-sizing: border-box; min-height: var(--size-row); padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.up-row + .up-row { border-top: 1px solid var(--line); }
.up-btn { box-sizing: border-box; height: var(--size-button); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.up-btn--second { background: var(--raised); color: var(--text); }
.up-btn--pair { height: var(--size-button-pair); padding: 0 var(--space-5); }
.up-btn--text { height: var(--size-touch); padding: 0; background: none; color: var(--accent); }
.up-btn--quiet { height: var(--size-touch); padding: 0; background: none; color: var(--text-secondary); }
.up-pill { box-sizing: border-box; height: var(--size-pill); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--stroke); border-radius: var(--radius-pill); background: var(--card); color: var(--text); white-space: nowrap; }
.up-pill--round { width: var(--size-pill); padding: 0; justify-content: center; }
.up-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--status-active); flex: none; }
.up-tile { box-sizing: border-box; height: var(--size-tile); background: var(--card); color: var(--text); border: 0; border-radius: var(--radius-card); padding: var(--space-3); display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.up-tile .heading { white-space: nowrap; }
.up-bar { height: var(--size-bar); border-radius: var(--radius-bar); background: var(--raised); overflow: hidden; }
.up-bar > span { display: block; height: 100%; border-radius: var(--radius-bar); background: var(--accent); }
.up-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.up-accent { width: var(--space-1); border-radius: var(--radius-bar); align-self: stretch; background: var(--zone-in); flex: none; }
.up-tabpill { display: inline-flex; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-pill); }
.up-tab { box-sizing: border-box; height: var(--size-tab); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.up-tab[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }
.up-chevron { flex: none; color: var(--text-tertiary); }
/* Website only */
.up-container { box-sizing: border-box; max-width: var(--size-page-max); margin-inline: auto; padding-inline: var(--space-5); }
.up-section { padding-block: var(--space-8); }
.up-prose { max-width: 65ch; }
@media (min-width: 800px) { .up-container { padding-inline: var(--space-7); } .up-section { padding-block: var(--space-9); } }
/* Version 3 */
.up-scene { background: linear-gradient(var(--sky-top), var(--sky-bottom) 500px, var(--ridge-3) 500px); }
.up-live { box-sizing: border-box; background: var(--live-in); color: var(--on-live); text-shadow: var(--shadow-on-live); }
.up-live > svg { filter: drop-shadow(var(--shadow-on-live-large)); overflow: visible; }
.up-live .live-number, .up-live .live-instruction, .up-live .live-instruction-long { text-shadow: var(--shadow-on-live-large); }
.up-live--below { background: var(--live-below); }
.up-live--just-above { background: var(--live-just-above); color: var(--on-live-just-above); }
.up-live--above { background: var(--live-above); }
.up-live-panel { box-sizing: border-box; background: rgba(0, 0, 0, 0.18); border-radius: var(--radius-card); }
.up-session-bar { box-sizing: border-box; height: var(--size-session-bar); border: 0; border-radius: var(--radius-pill); background: var(--live-in); color: var(--on-live); text-shadow: var(--shadow-on-live); padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.up-session-bar.up-live--below { background: var(--live-below); }
.up-session-bar.up-live--just-above { background: var(--live-just-above); color: var(--on-live-just-above); }
.up-session-bar.up-live--above { background: var(--live-above); }
.up-avatar { box-sizing: border-box; width: var(--size-pill); height: var(--size-pill); border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.up-avatar--large { width: var(--size-avatar); height: var(--size-avatar); }
.up-choice { box-sizing: border-box; border: 1px solid var(--stroke); border-radius: 14px; padding: 10px 14px; }
.up-choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }