.app-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--space-3);
padding: calc(var(--space-2) + var(--safe-top))
max(calc(var(--gutter) + var(--safe-right)), calc((100% - var(--content-max)) / 2 + var(--gutter)))
var(--space-2)
max(calc(var(--gutter) + var(--safe-left)), calc((100% - var(--content-max)) / 2 + var(--gutter)));
background: var(--color-bg);
background: color-mix(in srgb, var(--color-bg) 82%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.app-header__title {
flex: 1;
font-size: 1.125rem;
font-weight: 700;
}
.saved-indicator {
font-size: 0.9375rem;
color: var(--color-text-muted);
opacity: 0;
transition: opacity var(--speed) var(--ease);
}
.saved-indicator.is-visible {
opacity: 1;
}
.app-back {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-2) calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));
}
.app-back:empty {
display: none;
}
.app-back:not(:empty) + .app-main {
padding-top: 0;
}
.app-main {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-2) calc(var(--gutter) + var(--safe-right))
var(--space-6) calc(var(--gutter) + var(--safe-left));
}
.app-footer {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 calc(var(--gutter) + var(--safe-right))
calc(var(--tabbar-h) + 96px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.stack > * + * {
margin-top: var(--space-4);
}
.section-title {
margin: var(--space-6) 0 var(--space-3);
}
.tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: grid;
grid-template-columns: repeat(4, 1fr);
min-height: calc(var(--tabbar-h) + var(--safe-bottom));
padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.tabbar__tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: var(--tabbar-h);
padding: var(--space-1);
border: 0;
background: none;
color: var(--color-text-muted);
font-size: 0.8125rem;   /* tab labels sit under an icon, so they may be a bit smaller */
font-weight: 600;
text-decoration: none;
}
.tabbar__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 30px;
border-radius: var(--radius-pill);
transition: background-color var(--speed) var(--ease);
}
.tabbar__icon {
color: var(--tone, currentColor);
}
.tabbar__tab[aria-current="page"] {
color: var(--color-primary-strong);
}
.tabbar__tab[aria-current="page"] .tabbar__icon {
background: var(--color-primary-soft);
}
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--tabbar-h) + var(--safe-bottom));
z-index: 15;
padding: var(--space-3) calc(var(--gutter) + var(--safe-right)) var(--space-3)
calc(var(--gutter) + var(--safe-left));
background: linear-gradient(to top, var(--color-bg) 70%, transparent);
pointer-events: none;
}
.action-bar > * {
max-width: var(--content-max);
margin: 0 auto;
pointer-events: auto;
}
.tabbar__brand,
.tabbar__foot {
display: none;
}
@media (min-width: 900px) {
:root {
--rail-w: 248px;
--content-max: 640px;
}
.tabbar {
top: 0;
right: auto;
width: var(--rail-w);
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-5) var(--space-3);
border-top: 0;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.tabbar > * {
flex-shrink: 0;
}
.tabbar__brand {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-2) var(--space-5);
font-weight: 800;
font-size: 1.0625rem;
letter-spacing: -0.01em;
}
.tabbar__brand .tile {
background: var(--color-primary);
color: var(--color-on-primary);
}
.tabbar__tab {
flex-direction: row;
justify-content: flex-start;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-control);
font-size: 1rem;
}
.tabbar__tab:hover {
background: var(--color-surface-2);
}
.tabbar__tab[aria-current="page"] {
background: var(--color-primary-soft);
}
.tabbar__icon {
width: 32px;
height: 32px;
}
.tabbar__tab[aria-current="page"] .tabbar__icon {
background: transparent;
}
.tabbar__foot {
display: block;
margin-top: auto;
padding: var(--space-3);
font-size: 0.875rem;
color: var(--color-text-muted);
}
body {
padding-left: var(--rail-w);
}
.app-header__title {
visibility: hidden;   /* the sidebar shows the name */
}
.app-main {
padding-bottom: var(--space-6);
}
.app-footer {
padding-bottom: 140px;
}
.action-bar {
left: var(--rail-w);
bottom: 0;
}
}
@media (min-width: 1100px) {
body[data-screen="today"],
body[data-screen="paycheck"],
body[data-screen="bills"],
body[data-screen="spending"],
body[data-screen="debt"],
body[data-screen="savings"],
body[data-screen="goals"],
body[data-screen="overview"],
body[data-screen="help"] {
--content-max: 1080px;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap);
min-width: var(--tap);
padding: var(--space-3) var(--space-5);
border: 2px solid transparent;
border-radius: var(--radius-control);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color var(--speed) var(--ease), transform 80ms var(--ease);
}
.btn:active {
transform: scale(0.98);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn--primary:hover {
background: var(--color-primary-strong);
}
.btn--secondary {
background: var(--color-accent-soft);
color: var(--color-accent-ink);
}
.btn--ghost {
background: transparent;
color: var(--color-primary-strong);
}
.btn--outline {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
.btn--block {
display: flex;
width: 100%;
}
.btn--big {
min-height: 56px;
font-size: 1.0625rem;
border-radius: var(--radius-card);
}
.btn--small {
padding: var(--space-2) var(--space-4);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tap);
height: var(--tap);
flex-shrink: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-text);
font-size: 1.125rem;
font-weight: 700;
}
.icon-btn svg {
width: 22px;
height: 22px;
}
.card {
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.card--hero {
padding: var(--space-5) var(--space-4);
background: var(--hero-gradient);
text-align: center;
}
.card--hero .big-number {
color: var(--color-hero-number);
}
.card__label {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-muted);
}
.big-number {
margin: var(--space-1) 0;
font-size: clamp(3rem, 15vw, 4rem);   /* 48–64px */
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--color-text);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.row {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 56px;
padding: var(--space-2) 0;
}
.row + .row {
border-top: 1px solid var(--color-border);
}
.row__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.row--button {
width: 100%;
border: 0;
border-radius: 0;
background: none;
text-align: left;
color: inherit;
}
.row--button + .row--button {
border-top: 1px solid var(--color-border);
}
.row__edit {
display: flex;
color: var(--color-text-muted);
}
.row__edit .icon {
width: 18px;
height: 18px;
}
.row__title {
font-weight: 600;
}
.row__sub {
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
[data-icon] {
display: inline-flex;
}
[data-icon][class^="tone-"] {
color: var(--tone);
}
.tone-teal  { --tone: var(--tone-teal);  --tone-soft: var(--tone-teal-soft); }
.tone-coral { --tone: var(--tone-coral); --tone-soft: var(--tone-coral-soft); }
.tone-gold  { --tone: var(--tone-gold);  --tone-soft: var(--tone-gold-soft); }
.tone-sky   { --tone: var(--tone-sky);   --tone-soft: var(--tone-sky-soft); }
.tile {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-control);
background: var(--tone-soft, var(--color-surface-2));
color: var(--tone, var(--color-text-muted));
}
.tile .icon {
width: 22px;
height: 22px;
}
.tile--big {
width: 72px;
height: 72px;
border-radius: 22px;
}
.tile--big .icon {
width: 36px;
height: 36px;
}
.cents {
font-size: 0.5em;
font-weight: 700;
vertical-align: 0.75em;
margin-left: 0.04em;
letter-spacing: 0;
}
.eyebrow {
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.card__title {
margin-bottom: var(--space-2);
font-size: 1.0625rem;
}
.income {
color: var(--color-primary-strong);
font-weight: 700;
}
.ring {
position: relative;
display: inline-flex;
width: 64px;
height: 64px;
flex-shrink: 0;
}
.ring svg {
width: 64px;
height: 64px;
transform: rotate(-90deg);
}
.ring circle {
fill: none;
stroke-width: 6;
}
.ring__track {
stroke: var(--color-surface-2);
opacity: 0.9;
}
.ring__fill {
stroke: var(--color-primary);
stroke-linecap: round;
transition: stroke-dasharray 700ms var(--ease);
}
.ring__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.ring__center strong {
font-size: 1.125rem;
font-weight: 800;
}
.ring__center small {
font-size: 0.6875rem;
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stats {
display: grid;
grid-auto-flow: column;            /* one row, equal columns, however many tiles */
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (max-width: 599px) {
.stats {
gap: var(--space-2);
}
.stat {
padding: var(--space-3);
}
.stat__label {
font-size: 0.6875rem;
letter-spacing: 0.04em;
}
.stat__value {
font-size: 1.125rem;
}
.stat__sub {
font-size: 0.75rem;
}
.stat .cents {
display: none;   /* tiles are a summary; full amounts are one tap away */
}
}
.stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: var(--space-4);
border-radius: var(--radius-card);
background: linear-gradient(160deg, var(--tone-soft), var(--color-surface) 85%);
box-shadow: var(--shadow-card);
}
.stat__icon {
display: flex;
margin-bottom: var(--space-2);
color: var(--tone);
}
.stat__label {
hyphens: auto;
-webkit-hyphens: auto;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.stat__value {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.stat__sub {
font-size: 0.875rem;
color: var(--color-text-muted);
}
.datechip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-control);
background: var(--color-surface-2);
line-height: 1.05;
}
.datechip strong {
font-size: 1.125rem;
font-weight: 800;
}
.datechip small {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-text-muted);
}
.datechip--today {
background: var(--color-primary);
color: var(--color-on-primary);
}
.datechip--today small {
color: inherit;
}
.bars {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.bar__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 6px;
}
.bar__name {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
}
.bar__name .icon {
width: 20px;
height: 20px;
}
.bar__track {
height: 10px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
overflow: hidden;
}
.bar__track span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tone, var(--color-primary));
transition: width 700ms var(--ease);
}
.jar {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.jar + .jar {
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
}
.breakdown {
margin-top: var(--space-2);
}
.line {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: 6px 0;
}
.line--muted {
color: var(--color-text-muted);
}
.line__label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px var(--space-2);
min-width: 0;
}
.line__tag {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text-muted);
white-space: nowrap;
}
.line__tag--paid {
color: var(--color-primary-strong);
}
.year-chips .chip {
min-height: 40px;
padding: var(--space-1) var(--space-3);
}
.line--income {
color: var(--color-primary-strong);
font-weight: 600;
}
.line--button {
width: 100%;
min-height: 40px;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.line--total {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: 1.125rem;
font-weight: 700;
}
.status {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
font-weight: 500;
}
.status .icon {
width: 22px;
height: 22px;
margin-top: 1px;
}
.status--good {
background: var(--color-good-soft);
color: var(--color-good-strong);
}
.status--careful {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.badge--good {
background: var(--color-good-soft);
color: var(--color-good-strong);
}
.badge--careful {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge--soon {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge--overdue {
background: var(--color-overdue-soft);
color: var(--color-overdue);
}
.badge--done {
background: var(--color-good-soft);
color: var(--color-good-strong);
}
.status--over {
background: var(--color-overdue-soft);
color: var(--color-overdue);
}
@keyframes pop {
0% { transform: scale(1); }
40% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.is-celebrating {
animation: pop 360ms var(--ease);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: var(--tap);
padding: var(--space-2) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-weight: 600;
}
.chip[aria-pressed="true"] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary-strong);
}
.progress {
height: 12px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
overflow: hidden;
}
.progress__fill {
height: 100%;
border-radius: inherit;
background: var(--color-primary);
transition: width 600ms var(--ease);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.field + .field {
margin-top: var(--space-4);
}
.field__label {
font-weight: 600;
}
.field__hint {
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.input,
.select {
width: 100%;
min-height: var(--tap);
padding: var(--space-3) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-control);
background: var(--color-surface);
font-size: 1rem;    /* 16px — stops iPhone zooming in */
}
.field__error {
color: var(--color-careful);
font-size: 0.9375rem;
font-weight: 600;
}
.field__error:empty {
display: none;
}
.check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: var(--tap);
padding: var(--space-3) 0;
cursor: pointer;
}
.check input {
width: 24px;
height: 24px;
flex-shrink: 0;
margin: 0;
accent-color: var(--color-primary);
}
.check > span {
display: flex;
flex-direction: column;
}
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
input[type="date"].input {
min-height: var(--tap);
-webkit-appearance: none;
appearance: none;
}
.input:focus,
.select:focus {
outline: none;
border-color: var(--color-primary);
}
.input--money {
font-size: 1.5rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.swatch {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: var(--radius-pill);
border: 2px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-border);
}
.chip--two {
flex-direction: column;
gap: 0;
height: auto;
min-height: var(--tap);
padding-block: var(--space-2);
line-height: 1.25;
text-align: center;
}
.chip__sub {
font-size: 0.8125rem;
font-weight: 500;
opacity: 0.85;
}
.segmented {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-2);
}
.check-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: var(--tap);
min-width: 88px;
flex-shrink: 0;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-weight: 600;
color: var(--color-text);
}
.check-btn[aria-pressed="true"] {
border-color: var(--color-good);
background: var(--color-good);
color: var(--color-on-good);
}
.backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: var(--backdrop);
opacity: 0;
pointer-events: none;
transition: opacity var(--speed) var(--ease);
}
.backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
flex-direction: column;
max-width: var(--content-max);
max-height: 90vh;
max-height: 90dvh;
margin: 0 auto;
background: var(--color-surface);
border-radius: 24px 24px 0 0;
box-shadow: var(--shadow-sheet);
transform: translateY(105%);
visibility: hidden;
transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed);
}
.sheet.is-open {
transform: translateY(0);
visibility: visible;
transition: transform var(--speed) var(--ease), visibility 0s;
}
.sheet__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--gutter) var(--space-2);
}
.sheet__header h2 {
flex: 1;
}
.sheet__body {
flex: 1;
overflow-y: auto;
padding: var(--space-2) var(--gutter) var(--space-4);
}
.sheet__footer {
padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-bottom));
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
@media (min-width: 900px) {
.sheet {
bottom: 50%;
border-radius: 24px;
transform: translateY(60%);
opacity: 0;
}
.sheet.is-open {
transform: translateY(50%);
opacity: 1;
}
}
.toast {
position: fixed;
left: 50%;
top: calc(var(--safe-top) + 60px);
z-index: 60;
display: flex;
align-items: center;
gap: var(--space-3);
width: calc(100% - 2 * var(--gutter));
max-width: 480px;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-text);
color: var(--color-bg);
box-shadow: var(--shadow-card);
transform: translate(-50%, -16px);
opacity: 0;
pointer-events: none;
transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.toast.is-open {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.toast__text {
flex: 1;
min-height: var(--tap);
display: flex;
align-items: center;
}
.toast .btn {
color: var(--color-bg);
text-decoration: underline;
}
@media (min-width: 900px) {
.toast {
margin-left: calc(var(--rail-w) / 2);
}
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
text-align: center;
}
.empty__text {
max-width: 28ch;
color: var(--color-text-muted);
}
.tabbar__tab--side,
.tabbar__group,
.tabbar__spacer {
display: none;
}
@media (min-width: 900px) {
.tabbar__tab--side {
display: flex;
min-height: 44px;
}
.tabbar__group {
display: block;
margin: var(--space-4) 0 var(--space-1);
padding: 0 var(--space-3);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.tabbar__spacer {
display: block;
flex: 1;
}
.tabbar__foot {
margin-top: 0;
}
}
.help-btn[hidden] {
display: none;
}
.help-btn {
color: var(--color-primary-strong);
}
.tour-backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(0, 0, 0, 0.55);
}
body.is-touring .tabbar {
z-index: 45;
}
.tabbar__tab.is-tour-target {
box-shadow: 0 0 0 3px var(--color-primary);
border-radius: var(--radius-control);
}
.tour {
position: fixed;
z-index: 50;
width: min(320px, calc(100vw - 24px));
padding: var(--space-4);
border-radius: var(--radius-card);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.tour::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
transform: rotate(45deg);
}
.tour--up::after {
bottom: -8px;
left: calc(var(--arrow, 50%) - 7px);
border-top: 0;
border-left: 0;
}
.tour--right::after {
left: -8px;
top: calc(var(--arrow, 36px) - 7px);
border-top: 0;
border-right: 0;
}
.tour__step {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.tour__title {
margin: var(--space-1) 0 var(--space-2);
font-size: 1.125rem;
}
.tour__body {
margin: 0;
}
.tour__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-4);
}
.help-example {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-primary-soft);
}
.help-example p {
margin: 0;
}
.help-example .eyebrow {
margin-bottom: var(--space-1);
color: var(--color-primary-strong);
}
.coach {
display: flex;
align-items: center;
gap: var(--space-3);
}
.coach__text {
margin: 0;
}
body.hide-tips .tip-line {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.tour {
animation: tour-in 220ms var(--ease);
}
@keyframes tour-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
.illustration {
width: 160px;
height: 120px;
}
.illustration__blob {
fill: var(--tone-soft);
}
.illustration__card {
fill: var(--color-surface);
stroke: var(--color-border);
stroke-width: 2;
}
.illustration__line {
fill: var(--color-surface-2);
}
.illustration__icon {
color: var(--tone);
}
.illustration__dot--a {
fill: var(--tone-gold);
}
.illustration__dot--b {
fill: var(--tone-sky);
}
.illustration__dot--c {
fill: var(--tone-coral);
}
@media (prefers-reduced-motion: no-preference) {
.illustration__dot {
animation: illustration-float 3.2s ease-in-out infinite;
}
.illustration__dot--b {
animation-delay: 0.6s;
}
.illustration__dot--c {
animation-delay: 1.2s;
}
@keyframes illustration-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
}
.chip--small {
min-height: 36px;
padding: var(--space-1) var(--space-3);
font-size: 0.875rem;
gap: var(--space-1);
}
.chip--small .icon {
width: 16px;
height: 16px;
}