*/
.progress-steps { display: grid; grid-template-columns: repeat(var(--steps, 7), 1fr); gap: 5px; }
.progress-steps > i {
height: 4px; border-radius: 2px; background: var(--surface-3); position: relative; overflow: hidden;
}
.progress-steps > i::after {
content: ""; position: absolute; inset: 0; background: var(--lime);
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-slow) var(--ease-out);
}
.progress-steps > i.is-done::after { transform: scaleX(1); }
.progress-steps > i.is-current::after { transform: scaleX(1); box-shadow: 0 0 10px var(--lime); }
/* ------------------------------------------------------------------
TABIT
------------------------------------------------------------------ */
.tabs {
display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line);
overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > [role="tab"], .tabs > button {
position: relative; min-height: var(--touch-min); padding: 0 2px;
color: var(--text-muted); font-weight: var(--fw-semi); font-size: var(--fs-sm); white-space: nowrap;
transition: color var(--dur-fast);
}
.tabs > [aria-selected="true"] { color: var(--text); }
.tabs > [role="tab"]::after, .tabs > button::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
background: var(--lime); box-shadow: 0 0 10px var(--lime);
transform: scaleX(0); transition: transform var(--dur-base) var(--ease-spring);
}
.tabs > [aria-selected="true"]::after { transform: scaleX(1); }
/* ------------------------------------------------------------------
ALANAVIGAATIO (kelluva lasipalkki)
------------------------------------------------------------------ */
.bottom-nav {
position: fixed; z-index: var(--z-nav);
left: 50%; transform: translateX(-50%);
bottom: calc(var(--safe-bottom) + 10px);
width: min(calc(100% - 2 * var(--sp-3)), calc(var(--app-max-w) - 2 * var(--sp-3)));
height: var(--nav-h);
display: grid; grid-template-columns: repeat(5, 1fr);
padding: 6px;
background: var(--surface-glass);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid var(--line-strong);
border-radius: 22px;
box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 20px 40px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base);
}
.bottom-nav.is-hidden { transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; }
.nav-item {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-width: 0; border-radius: 16px; color: var(--text-muted); text-decoration: none;
font-size: 10.5px; font-weight: var(--fw-semi); letter-spacing: .01em;
transition: color var(--dur-fast), background-color var(--dur-base);
}
.nav-item .icon { --icon-size: 22px; transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base); }
.nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { color: var(--text-2); }
.nav-item[aria-current="page"] { color: var(--lime); background: linear-gradient(180deg, var(--lime-a10), rgba(182,255,59,.02)); }
.nav-item[aria-current="page"] .icon { filter: var(--dropglow-lime); transform: translateY(-1px); }
.nav-item[aria-current="page"]::before {
content: ""; position: absolute; top: -7px; left: 50%; width: 22px; height: 3px; margin-left: -11px;
border-radius: 0 0 3px 3px; background: var(--lime); box-shadow: 0 0 10px var(--lime), 0 0 2px var(--lime);
}
/* ------------------------------------------------------------------
APP HEADER (näkymän yläpalkki)
------------------------------------------------------------------ */
.app-header {
position: sticky; top: 0; z-index: var(--z-sticky);
display: flex; align-items: center; gap: var(--sp-2);
min-height: calc(var(--header-h) + var(--safe-top));
padding: var(--safe-top) var(--gutter) 0;
margin: 0 calc(-1 * var(--gutter));
background: linear-gradient(180deg, rgba(10,11,16,.92) 60%, rgba(10,11,16,0));
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.app-header__title { flex: 1; min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); text-align: center; }
.app-header__side { width: var(--touch-min); flex: none; }
/* ------------------------------------------------------------------
LISTARIVIT
------------------------------------------------------------------ */
.list { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.list--plain { background: none; border: 0; border-radius: 0; }
.list-row {
display: flex; align-items: center; gap: var(--sp-3);
min-height: 60px; padding: var(--sp-3) var(--sp-4);
color: inherit; text-decoration: none; text-align: left; width: 100%;
border-bottom: 1px solid var(--line);
transition: background-color var(--dur-fast);
}
.list-row:last-child { border-bottom: 0; }
a.list-row:active, button.list-row:active, .list-row--interactive:active { background: rgba(255,255,255,.04); }
.list-row__lead {
width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
display: grid; place-items: center; background: var(--surface-3); color: var(--text-2);
font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.list-row__lead--lime { background: var(--lime-a10); color: var(--lime); }
.list-row__lead--cyan { background: var(--cyan-a10); color: var(--cyan); }
.list-row__lead--magenta { background: var(--magenta-a10); color: var(--magenta); }
.list-row__lead--orange { background: var(--orange-a10); color: var(--orange); }
.list-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.list-row__title { font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row__meta { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row__trail { flex: none; color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
.list-row__value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--text); font-size: var(--fs-md); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.section-head:first-child { margin-top: 0; }
.section-head__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.section-head__action { font-size: var(--fs-sm); color: var(--lime); font-weight: var(--fw-semi); min-height: var(--touch-min); display: inline-flex; align-items: center; }
/* ------------------------------------------------------------------
TYHJÄTILA
------------------------------------------------------------------ */
.empty {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3);
padding: var(--sp-8) var(--sp-5);
border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
background: radial-gradient(60% 60% at 50% 0%, rgba(39,232,255,.06), transparent 70%);
}
.empty__art {
width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--cyan);
box-shadow: 0 0 30px -8px rgba(39,232,255,.5); margin-bottom: var(--sp-2);
}
.empty__art .icon { --icon-size: 32px; filter: var(--dropglow-cyan); }
.empty__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.empty__text { color: var(--text-muted); font-size: var(--fs-sm); max-width: 30ch; }
/* ------------------------------------------------------------------
SKELETON
------------------------------------------------------------------ */
.skeleton {
position: relative; overflow: hidden; border-radius: var(--r-sm);
background: var(--surface-2); min-height: 14px;
}
.skeleton::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
animation: shimmer 1.4s var(--ease-in-out) infinite;
}
.skeleton--text { height: 14px; width: 70%; border-radius: 4px; }
.skeleton--title { height: 22px; width: 45%; border-radius: 6px; }
.skeleton--circle { border-radius: 50%; }
.skeleton--card { height: 120px; border-radius: var(--r-lg); }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
/* ------------------------------------------------------------------
BOTTOM SHEET (Treeni.ui.sheet({...}))
------------------------------------------------------------------ */
.backdrop {
position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--overlay);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.backdrop.is-open { opacity: 1; }
.sheet {
position: fixed; z-index: calc(var(--z-sheet) + 1);
left: 50%; bottom: 0; width: 100%; max-width: var(--app-max-w);
max-height: 88dvh; display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--surface-2), var(--surface-1) 120px);
border: 1px solid var(--line-strong); border-bottom: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: 0 -20px 60px -10px rgba(0,0,0,.8);
padding: var(--sp-2) var(--gutter) calc(var(--sp-5) + var(--safe-bottom));
transform: translate(-50%, 100%);
transition: transform var(--dur-slow) var(--ease-out);
}
.sheet.is-open { transform: translate(-50%, 0); }
.sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line-hi); margin: 4px auto var(--sp-4); flex: none; }
.sheet__title { font-size: var(--fs-xl); font-weight: var(--fw-heavy); margin-bottom: var(--sp-2); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding-bottom: var(--sp-2); }
.sheet__actions { display: flex; gap: var(--sp-3); padding-top: var(--sp-4); flex: none; }
.sheet__actions > .btn { flex: 1; }
/* ------------------------------------------------------------------
MODAL (Treeni.ui.modal / confirm)
------------------------------------------------------------------ */
.modal {
position: fixed; z-index: var(--z-modal); left: 50%; top: 50%;
width: min(calc(100% - 2 * var(--sp-5)), 400px);
max-height: 80dvh; overflow: auto;
background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
padding: var(--sp-6) var(--sp-5) var(--sp-5);
box-shadow: var(--shadow-3);
transform: translate(-50%, -46%) scale(.96); opacity: 0;
transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
}
.modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.modal__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--orange-a10); color: var(--orange); margin-bottom: var(--sp-4); }
.modal__title { font-size: var(--fs-xl); font-weight: var(--fw-heavy); margin-bottom: var(--sp-2); }
.modal__text { color: var(--text-2); font-size: var(--fs-sm); }
.modal__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.modal__actions > .btn { flex: 1; }
.backdrop--modal { z-index: calc(var(--z-modal) - 1); }
/* ------------------------------------------------------------------
TOAST (Treeni.ui.toast(msg, {type}))
------------------------------------------------------------------ */
.toast-region {
position: fixed; z-index: var(--z-toast); left: 0; right: 0;
top: calc(var(--safe-top) + var(--sp-3));
display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
pointer-events: none; padding: 0 var(--sp-4);
}
.toast {
--toast-c: var(--lime);
pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3);
max-width: 420px; width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
background: rgba(24, 27, 38, .94);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border: 1px solid var(--line-strong); border-radius: var(--r-md);
box-shadow: 0 16px 40px -10px rgba(0,0,0,.8), inset 3px 0 0 var(--toast-c);
font-size: var(--fs-sm); font-weight: var(--fw-medium);
animation: toast-in var(--dur-slow) var(--ease-spring) both;
}
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-out) both; }
.toast__icon { color: var(--toast-c); filter: drop-shadow(0 0 6px var(--toast-c)); }
.toast--info { --toast-c: var(--cyan); }
.toast--warn { --toast-c: var(--orange); }
.toast--error { --toast-c: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
/* ------------------------------------------------------------------
KAAVIOT (Treeni.charts) — yhteiset tyylit
------------------------------------------------------------------ */
.chart { position: relative; width: 100%; color: var(--text-muted); }
.chart svg { width: 100%; height: auto; }
.chart text { font-family: var(--font-mono); fill: var(--text-muted); font-size: 10px; }
.chart .chart__grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.chart .chart__axis { stroke: rgba(255,255,255,.12); }
.chart-ring { position: relative; display: inline-grid; place-items: center; }
.chart-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.chart-ring__value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); letter-spacing: var(--ls-num); line-height: 1; color: var(--text); }
.chart-ring__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.chart-ring__sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--text-2); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--sw); box-shadow: 0 0 8px var(--sw); }
.chart-legend__swatch--line { height: 3px; border-radius: 2px; width: 16px; }
.chart-legend__swatch--dash { height: 0; width: 16px; border-top: 2px dashed var(--sw); background: none; box-shadow: none; }
.chart-tip {
position: absolute; pointer-events: none; z-index: 2; transform: translate(-50%, calc(-100% - 10px));
padding: 6px 10px; border-radius: 8px; background: rgba(6,7,10,.92); border: 1px solid var(--line-strong);
font-family: var(--font-mono); font-size: 11px; color: var(--text); white-space: nowrap;
box-shadow: 0 8px 20px -6px rgba(0,0,0,.8); opacity: 0; transition: opacity var(--dur-fast);
}
.chart-tip.is-on { opacity: 1; }
.macro-bars { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.macro-bar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: var(--sp-2); }
.macro-bar__name { font-weight: var(--fw-semi); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.macro-bar__name::before { flex: none; }
.macro-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.macro-bar__name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--mc); box-shadow: 0 0 8px var(--mc); }
.macro-bar__val { white-space: nowrap; flex: none; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.macro-bar__val small { color: var(--text-muted); font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
.macro-bar__track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.macro-bar__fill {
position: absolute; inset: 0 auto 0 0; border-radius: inherit; width: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 40%, transparent), var(--mc));
box-shadow: 0 0 14px color-mix(in srgb, var(--mc) 80%, transparent);
transition: width var(--dur-chart) var(--ease-out);
}
.macro-bar__over { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .6; }
.heatmap { display: flex; flex-direction: column; gap: var(--sp-3); }
.heatmap__figs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.heatmap__fig { text-align: center; }
.heatmap__cap { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.heatmap .m { transition: fill var(--dur-chart) var(--ease-out), filter var(--dur-base); cursor: pointer; }
.heatmap .m:hover, .heatmap .m.is-active { stroke: var(--text); stroke-width: 1.6; }
.heatmap__scale { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
.heatmap__grad { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--heat-0), var(--heat-1), var(--heat-2), var(--heat-3), var(--heat-4)); }
.streak { display: inline-flex; align-items: center; gap: var(--sp-2); }
.streak__count { font-family: var(--font-display); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); letter-spacing: var(--ls-num); line-height: 1; }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-confetti); }