/* theme:start — generated by bin/app-build.sh from meta.php seed #00897B, don't edit by hand */
:root {
--md-primary: #006B5F;
--md-on-primary: #FFFFFF;
--md-primary-container: #9EF2E3;
--md-on-primary-container: #005048;
--md-secondary: #4A635E;
--md-on-secondary: #FFFFFF;
--md-secondary-container: #CCE8E2;
--md-on-secondary-container: #334B47;
--md-tertiary: #456179;
--md-on-tertiary: #FFFFFF;
--md-tertiary-container: #CBE6FF;
--md-on-tertiary-container: #2D4A60;
--md-error: #BA1A1A;
--md-on-error: #FFFFFF;
--md-error-container: #FFDAD6;
--md-on-error-container: #93000A;
--md-background: #F4FBF8;
--md-on-background: #161D1B;
--md-surface: #F4FBF8;
--md-on-surface: #161D1B;
--md-surface-variant: #DAE5E1;
--md-on-surface-variant: #3F4946;
--md-surface-container-lowest: #FFFFFF;
--md-surface-container-low: #EFF5F2;
--md-surface-container: #E9EFEC;
--md-surface-container-high: #E3EAE7;
--md-surface-container-highest: #DDE4E1;
--md-outline: #6F7976;
--md-outline-variant: #BEC9C5;
--md-inverse-surface: #2B3230;
--md-inverse-on-surface: #ECF2EF;
--md-inverse-primary: #82D5C7;
--md-red: #B42800;
--md-on-red: #FFFFFF;
--md-red-container: #FFDAD2;
--md-on-red-container: #8A1D00;
--md-yellow: #795900;
--md-on-yellow: #FFFFFF;
--md-yellow-container: #FFDFA0;
--md-on-yellow-container: #5C4300;
--md-green: #006D43;
--md-on-green: #FFFFFF;
--md-green-container: #7CFAB7;
--md-on-green-container: #005232;
}
@media (prefers-color-scheme: dark) {
:root {
--md-primary: #82D5C7;
--md-on-primary: #003731;
--md-primary-container: #005048;
--md-on-primary-container: #9EF2E3;
--md-secondary: #B1CCC6;
--md-on-secondary: #1C3531;
--md-secondary-container: #334B47;
--md-on-secondary-container: #CCE8E2;
--md-tertiary: #ADCAE5;
--md-on-tertiary: #143349;
--md-tertiary-container: #2D4A60;
--md-on-tertiary-container: #CBE6FF;
--md-error: #FFB4AB;
--md-on-error: #690005;
--md-error-container: #93000A;
--md-on-error-container: #FFDAD6;
--md-background: #0E1513;
--md-on-background: #DDE4E1;
--md-surface: #0E1513;
--md-on-surface: #DDE4E1;
--md-surface-variant: #3F4946;
--md-on-surface-variant: #BEC9C5;
--md-surface-container-lowest: #090F0E;
--md-surface-container-low: #161D1B;
--md-surface-container: #1A211F;
--md-surface-container-high: #252B2A;
--md-surface-container-highest: #303634;
--md-outline: #899390;
--md-outline-variant: #3F4946;
--md-inverse-surface: #DDE4E1;
--md-inverse-on-surface: #2B3230;
--md-inverse-primary: #006B5F;
--md-red: #FFB4A2;
--md-on-red: #621100;
--md-red-container: #8A1D00;
--md-on-red-container: #FFDAD2;
--md-yellow: #F8BD2A;
--md-on-yellow: #402D00;
--md-yellow-container: #5C4300;
--md-on-yellow-container: #FFDFA0;
--md-green: #5EDD9C;
--md-on-green: #003921;
--md-green-container: #005232;
--md-on-green-container: #7CFAB7;
}
}
/* theme:end */
/* Gain Streak's one-off visuals: button rows, today's plan, the editor rows, the player and the exercise chart (.claude/rules/app-gain-streak.md).
A text rule on a ,
or - starts with .layout-main, or app.css's .layout-main p/ul/li sizes win. */
/* A row of buttons that wraps on a narrow screen. */
.app-buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-xsmall); }
.app-buttons--center { justify-content: center; }
.app-buttons--end { justify-content: flex-end; margin-top: var(--spacing-large); }
.app-buttons [hidden], .app-editor-rows [hidden], .app-sheet-list [hidden], .app-player [hidden] { display: none; }
/* Today's plan: the settings, then per set its label beside the goal and the break field. */
.app-plan { display: flex; flex-direction: column; gap: var(--spacing-xsmall); margin-bottom: var(--spacing-medium); }
.app-plan-set { display: grid; grid-template-columns: minmax(var(--spacing-xxxlarge), auto) 1fr 1fr; gap: var(--spacing-xsmall); align-items: start; }
.layout-main .app-plan-set__label { margin: 0; padding-top: var(--spacing-medium); font-size: var(--md-title-small-size); font-weight: var(--md-title-small-weight); color: var(--md-on-surface-variant); }
/* The editor: one row per exercise, its name and the move and remove icons above its sets. */
.app-editor-rows { display: flex; flex-direction: column; gap: var(--spacing-xsmall); }
.app-editor-row { display: flex; flex-direction: column; gap: var(--spacing-xxsmall); padding: var(--spacing-small) var(--spacing-medium); border-radius: var(--spacing-medium); background: var(--md-surface-container); }
.app-editor-row__head { display: flex; align-items: center; gap: var(--spacing-xsmall); }
.layout-main .app-editor-row__name { flex: 1; margin: 0; font-size: var(--md-title-medium-size); font-weight: var(--md-title-medium-weight); }
.app-editor-row__icons { display: flex; }
.app-sheet-list { display: flex; flex-direction: column; gap: var(--spacing-xxxsmall); }
/* The player: the set's name, round, set and goal large in the middle, the ring of the break. */
.app-player { display: flex; flex-direction: column; gap: var(--spacing-medium); text-align: center; }
.app-player p { margin: 0; }
.app-player__set, .app-player__break, .app-player__finish { display: flex; flex-direction: column; gap: var(--spacing-xsmall); }
.layout-main .app-player__exercise { font-size: var(--md-headline-small-size); font-weight: var(--md-headline-small-weight); }
.layout-main .app-player__goal-label { margin-top: var(--spacing-medium); color: var(--md-on-surface-variant); }
.layout-main .app-player__goal { font-size: var(--md-display-medium-size); font-weight: var(--md-display-medium-weight); color: var(--md-primary); margin-bottom: var(--spacing-medium); }
.app-player__ring { position: relative; width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto; }
.app-player__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.app-player__ring circle { fill: none; stroke-width: 10; }
.app-player__ring-track { stroke: var(--md-surface-container-highest); }
.app-player__ring-bar { stroke: var(--md-primary); stroke-dasharray: 100; stroke-linecap: round; }
.app-player__ring-bar--accent { stroke: var(--md-tertiary); }
.layout-main .app-player__seconds { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--md-display-medium-size); font-weight: var(--md-display-medium-weight); }
.layout-main .app-player__today { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xxsmall); text-align: start; }
.app-player__today-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xsmall); flex-wrap: wrap; }
.app-player__today-sets { display: flex; flex-wrap: wrap; }
.app-player__finish { text-align: start; }
/* The exercise chart: one line per workout over the sessions side by side, the highest total above it, the workouts below. */
.app-chart { margin: 0; }
.app-chart svg { width: 100%; height: auto; }
.app-chart__axis { stroke: var(--md-outline-variant); stroke-width: 1; }
.app-chart polyline { fill: none; stroke-width: 2; }
.app-chart__series--1 { stroke: var(--md-primary); fill: var(--md-primary); color: var(--md-primary); }
.app-chart__series--2 { stroke: var(--md-tertiary); fill: var(--md-tertiary); color: var(--md-tertiary); }
.app-chart__series--3 { stroke: var(--md-secondary); fill: var(--md-secondary); color: var(--md-secondary); }
.app-chart__series--4 { stroke: var(--md-outline); fill: var(--md-outline); color: var(--md-outline); }
.app-chart__top { font-size: var(--md-label-medium-size); font-weight: var(--md-label-medium-weight); color: var(--md-on-surface-variant); }
.layout-main .app-chart__legend { list-style: none; margin: var(--spacing-xxsmall) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-small); font-size: var(--md-label-medium-size); font-weight: var(--md-label-medium-weight); }
.app-chart__legend li::before { content: ''; display: inline-block; width: var(--spacing-xsmall); height: var(--spacing-xsmall); margin-inline-end: var(--spacing-xxsmall); border-radius: 50%; background: currentColor; }
.layout-main .app-chart__legend li { font-size: var(--md-label-medium-size); font-weight: var(--md-label-medium-weight); }
/* An own exercise without a library picture (pages/exercises/view.php): its icon in the middle of the square media. */
.app-exercise-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); }