with the same class + --empty modifier
so callers can append either return shape without conditional styling. */
.wg-workout-chart {
display: block;
width: 100%;
max-width: var(--wg-workouts-chart-width);
height: auto;
margin-inline: auto;
}
.wg-workout-chart--empty {
min-height: var(--wg-workouts-chart-height);
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-fg-5);
font-size: var(--font-size-sm);
}
.wg-workout-chart__guide {
stroke: var(--wg-fg-5);
stroke-width: var(--wg-bp-chart-guide-stroke-width);
stroke-dasharray: var(--wg-bp-chart-guide-dasharray);
fill: none;
}
.wg-workout-chart__line {
fill: none;
stroke: var(--wg-sun);
stroke-width: var(--wg-workouts-chart-line-stroke-width);
stroke-linecap: round;
stroke-linejoin: round;
}
.wg-workout-chart__last {
fill: var(--wg-sun);
stroke: var(--wg-teal-stage);
stroke-width: var(--wg-workouts-chart-last-stroke-width);
}
/* Round-2, Task 6 — numeric axis tick labels. Mirrors the bp/weight
`__axis-tick` pattern: labels pull `fill` from the muted-on-teal
foreground token and reserve a tabular-nums variant so the numbers stay
vertically aligned. Y-tick labels right-align against the plot edge;
x-tick date labels centre-align below the plot. */
.wg-workout-chart__axis-tick {
fill: var(--wg-fg-3);
font-family: inherit;
font-size: var(--wg-font-size-mini);
font-variant-numeric: tabular-nums;
}
.wg-workout-chart__axis-tick[data-workout-axis="y"] {
text-anchor: end;
}
.wg-workout-chart__axis-tick[data-workout-axis="x"] {
text-anchor: middle;
}
/* Round-2, Task 6 — stats-tab chart legend. Sits directly below the chart
panel; a sun-swatch + series-label pill documents which metric the line
shows (sessions per week vs volume kg). */
.wg-workouts-stats__legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-sm);
margin-bottom: var(--space-md);
}
.wg-workouts-stats__legend-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--wg-radius-gloss);
font-family: var(--wg-font-mono);
font-size: var(--wg-font-size-mini);
color: var(--wg-fg-2);
background: var(--wg-bg-card-inset);
border: 1px solid var(--wg-border-hairline);
}
.wg-workouts-stats__legend-swatch {
width: var(--wg-workouts-stats-legend-swatch-size);
height: var(--wg-workouts-stats-legend-swatch-size);
border-radius: var(--wg-radius-pill);
background: var(--wg-sun);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* WGSleepChart base shell (Phase 8, Task 4). The SVG carries the shared
class; empty-state returns a
with the same class + --empty modifier.
Stacked-bar fills resolve via the per-stage variant classes (deep / light /
rem / awake); the HR overlay path, dots, and labels resolve via the
__hr-line / __hr-dot / __hr-dot-outer / __hr-label classes. */
.wg-sleep-chart {
display: block;
width: 100%;
max-width: var(--wg-health-chart-width);
height: auto;
margin-inline: auto;
}
.wg-sleep-chart--empty {
min-height: var(--wg-health-chart-tall-height);
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-fg-5);
font-size: var(--font-size-sm);
}
.wg-sleep-chart__stage {
stroke: none;
}
.wg-sleep-chart__stage--deep {
fill: var(--wg-health-sleep-deep);
}
.wg-sleep-chart__stage--light {
fill: var(--wg-health-sleep-light);
}
.wg-sleep-chart__stage--rem {
fill: var(--wg-health-sleep-rem);
}
.wg-sleep-chart__stage--awake {
fill: var(--wg-health-sleep-awake);
}
.wg-sleep-chart__guide {
stroke: var(--wg-fg-5);
stroke-width: var(--wg-bp-chart-guide-stroke-width);
stroke-dasharray: var(--wg-bp-chart-guide-dasharray);
fill: none;
}
.wg-sleep-chart__tick {
stroke: var(--wg-fg-5);
fill: none;
}
.wg-sleep-chart__axis-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-sleep-chart__day-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-sleep-chart__bar-label {
fill: var(--wg-fg-1);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-sleep-chart__hr-line {
fill: none;
stroke: var(--wg-health-sleep-hr);
stroke-width: var(--wg-health-chart-line-stroke-width);
stroke-linecap: round;
stroke-linejoin: round;
}
.wg-sleep-chart__hr-dot-outer {
fill: var(--wg-bg-card);
stroke: none;
}
.wg-sleep-chart__hr-dot {
fill: var(--wg-health-sleep-hr);
stroke: none;
}
.wg-sleep-chart__hr-label {
fill: var(--wg-health-sleep-hr);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
font-weight: var(--font-weight-bold);
paint-order: stroke fill;
stroke: var(--wg-bg-card);
stroke-width: 3;
}
/* Sleep card shell (Phase 8, Task 4). Wraps the WGSleepChart SVG under a
mono header, followed by a legend row and a section-label averages line.
The card itself uses the shared .wg-card surface. */
.wg-sleep-card {
padding: var(--wg-health-card-pad);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-sleep-card__header {
font-size: var(--wg-health-card-header-size);
}
.wg-sleep-card__stat {
font-size: var(--wg-health-card-stat-size);
color: var(--wg-fg-4);
}
/* Sleep card legend (Phase 8, Task 4) — mono swatch + label pairs; swatch
colour resolves via the __badge--{variant} class, never an inline style. */
.wg-health-legend {
display: flex;
flex-wrap: wrap;
gap: var(--wg-health-legend-gap);
align-items: center;
}
.wg-health-legend__item {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-xs);
color: var(--wg-fg-3);
font-family: var(--wg-font-mono);
}
.wg-health-legend__badge {
display: inline-block;
width: var(--wg-health-legend-badge-size);
height: var(--wg-health-legend-badge-size);
border-radius: var(--radius-sm);
}
.wg-health-legend__badge--line {
height: 2px;
border-radius: var(--radius-pill);
}
.wg-health-legend__badge--deep {
background: var(--wg-health-sleep-deep);
}
.wg-health-legend__badge--light {
background: var(--wg-health-sleep-light);
}
.wg-health-legend__badge--rem {
background: var(--wg-health-sleep-rem);
}
.wg-health-legend__badge--awake {
background: var(--wg-health-sleep-awake);
}
.wg-health-legend__badge--hr {
background: var(--wg-health-sleep-hr);
}
/* Steps chart (Phase 8, Task 5). Single-series vertical bar chart with
rotated in-bar step-count labels. Bar fill + label contrast resolve via
the --wg-health-steps-* tokens; axis + day labels + guide lines match the
sleep chart's muted style. */
.wg-steps-chart {
display: block;
width: 100%;
max-width: var(--wg-health-chart-width);
height: auto;
margin-inline: auto;
}
.wg-steps-chart--empty {
min-height: var(--wg-health-chart-tall-height);
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-fg-5);
font-size: var(--font-size-sm);
}
.wg-steps-chart__bar {
fill: var(--wg-health-steps-bar);
stroke: none;
}
.wg-steps-chart__guide {
stroke: var(--wg-fg-5);
stroke-width: var(--wg-bp-chart-guide-stroke-width);
stroke-dasharray: var(--wg-bp-chart-guide-dasharray);
fill: none;
}
.wg-steps-chart__axis-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-steps-chart__day-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-steps-chart__count-label {
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
font-weight: var(--font-weight-medium);
}
.wg-steps-chart__count-label--inside {
fill: var(--wg-health-steps-label-inside);
}
.wg-steps-chart__count-label--outside {
fill: var(--wg-fg-1);
}
/* Steps card shell (Phase 8, Task 5). Wraps the WGStepsChart SVG under a
mono header, followed by a section-label averages line. */
.wg-steps-card {
padding: var(--wg-health-card-pad);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-steps-card__header {
font-size: var(--wg-health-card-header-size);
}
.wg-steps-card__stat {
font-size: var(--wg-health-card-stat-size);
color: var(--wg-fg-4);
}
/* Vitals chart (Phase 8, Task 6). Area + line chart parameterised by vital
('hr' | 'spo2' | 'stress'); the variant modifier on the root svg selects
the --wg-health-vitals--line token. Axis + day + guide styling
matches the sleep + steps charts. */
.wg-vitals-chart {
display: block;
width: 100%;
max-width: var(--wg-health-chart-width);
height: auto;
margin-inline: auto;
}
.wg-vitals-chart--empty {
min-height: var(--wg-health-chart-height);
display: flex;
align-items: center;
justify-content: center;
color: var(--wg-fg-5);
font-size: var(--font-size-sm);
}
.wg-vitals-chart__guide {
stroke: var(--wg-fg-5);
stroke-width: var(--wg-bp-chart-guide-stroke-width);
stroke-dasharray: var(--wg-bp-chart-guide-dasharray);
fill: none;
}
.wg-vitals-chart__axis-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-vitals-chart__day-label {
fill: var(--wg-fg-5);
font-size: var(--font-size-xs);
font-family: var(--wg-font-mono);
}
.wg-vitals-chart__area {
fill: currentColor;
fill-opacity: 0.18;
stroke: none;
}
.wg-vitals-chart__line {
fill: none;
stroke: currentColor;
stroke-width: var(--wg-health-chart-line-stroke-width);
stroke-linecap: round;
stroke-linejoin: round;
}
.wg-vitals-chart__last {
fill: currentColor;
stroke: none;
}
.wg-vitals-chart--hr {
color: var(--wg-health-vitals-hr-line);
}
.wg-vitals-chart--spo2 {
color: var(--wg-health-vitals-spo2-line);
}
.wg-vitals-chart--stress {
color: var(--wg-health-vitals-stress-line);
}
/* Vitals card shell (Phase 8, Task 6). Wraps the WGVitalsChart SVG under
a mono header, followed by a section-label averages line. Mirrors the
sleep + steps card shells. */
.wg-vitals-card {
padding: var(--wg-health-card-pad);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-vitals-card__header {
font-size: var(--wg-health-card-header-size);
}
.wg-vitals-card__stat {
font-size: var(--wg-health-card-stat-size);
color: var(--wg-fg-4);
}
/* Health screen data-source disclaimer (Phase 8). Muted section-label
footer identifying the .nxk backup data source. */
.wg-health-disclaimer {
text-align: center;
color: var(--wg-fg-5);
margin-top: var(--space-sm);
}
/* Health Notes sub-tab (Phase 8, Task 7). `.wg-gloss--inset` textarea wrap
on top with a full-width `.wg-gloss--sun` Save CTA, then a day-grouped
`.wg-card` list. Each row carries a mono timestamp, the note body, and a
trailing `.wg-icon-btn` cluster (edit + delete). Offline-pending +
rejected states surface as `.wg-tag--mono` variants. */
.wg-health-notes {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.wg-health-notes-compose {
display: flex;
flex-direction: column;
gap: var(--wg-health-notes-compose-gap);
padding: var(--wg-health-notes-compose-card-pad);
}
.wg-health-notes-compose__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
min-width: 0;
}
.wg-health-notes-compose__title {
font-size: var(--wg-health-notes-compose-title-size);
color: var(--wg-fg-1);
letter-spacing: -0.01em;
white-space: nowrap;
}
.wg-health-notes-compose__tags {
display: flex;
gap: var(--space-xs);
overflow-x: auto;
min-width: 0;
scrollbar-width: none;
}
.wg-health-notes-compose__tags::-webkit-scrollbar {
display: none;
}
.wg-health-notes-compose__tag {
flex: 0 0 auto;
cursor: pointer;
background: var(--wg-tag-normal-bg);
color: var(--wg-tag-normal-fg);
border-color: var(--wg-tag-normal-border);
font-size: var(--wg-health-notes-compose-tag-size);
letter-spacing: 0.1em;
padding: var(--wg-health-notes-compose-tag-pad-y) var(--wg-health-notes-compose-tag-pad-x);
}
.wg-health-notes-compose__wrap {
padding: var(--wg-health-notes-compose-pad-y) var(--wg-health-notes-compose-pad-x);
}
.wg-health-notes-compose__textarea {
width: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
outline: none;
resize: vertical;
font-family: var(--wg-font-ui);
font-size: var(--wg-health-notes-body-size);
color: var(--wg-fg-1);
min-height: var(--wg-health-notes-compose-textarea-min);
line-height: 1.45;
}
.wg-health-notes-compose__textarea::placeholder {
color: var(--wg-fg-4);
}
.wg-health-notes-compose__footer {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.wg-health-notes-compose__count {
font-size: var(--wg-health-notes-compose-count-size);
color: var(--wg-fg-4);
letter-spacing: 0.08em;
}
.wg-health-notes-compose__save {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
min-height: var(--wg-health-notes-compose-save-min);
padding: var(--wg-health-notes-compose-save-pad-y) var(--wg-health-notes-compose-save-pad-x);
font-family: var(--wg-font-ui);
font-size: var(--wg-health-notes-compose-save-size);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
}
.wg-health-notes-compose__save[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.wg-health-notes__loading {
color: var(--wg-fg-4);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
text-align: center;
padding: var(--space-md) 0;
}
.wg-health-notes__list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.wg-health-notes__group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-health-notes__group-label {
font-size: var(--wg-health-notes-day-size);
}
.wg-health-notes__rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-health-notes-row {
display: grid;
grid-template-columns: var(--wg-health-notes-row-cols);
column-gap: var(--wg-health-notes-row-gap);
align-items: flex-start;
padding: var(--wg-health-notes-row-pad);
}
.wg-health-notes-row--pending {
opacity: 0.85;
}
.wg-health-notes-row--rejected {
border-color: var(--wg-tag-alert-border);
}
.wg-health-notes-row__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-health-notes-row__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.wg-health-notes-row__time {
font-size: var(--wg-health-notes-time-size);
color: var(--wg-fg-3);
letter-spacing: 0.02em;
}
.wg-health-notes-row__tag {
font-size: var(--wg-health-notes-row-tag-size);
letter-spacing: 0.1em;
cursor: pointer;
}
/* Round-2 Task 5: active-filter state — user has tapped a row chip to pin
the list to that tag. Reuses the existing high/sun token palette; the
distinguishing cue is a sharpened outline so the pinned chip reads as
"selected" against otherwise-identical siblings. */
.wg-health-notes-row__tag--active {
outline: 1px solid var(--wg-sun);
outline-offset: 1px;
}
.wg-health-notes-row__content {
font-family: var(--wg-font-ui);
font-size: var(--wg-health-notes-body-size);
color: var(--wg-fg-1);
white-space: pre-wrap;
word-break: break-word;
}
.wg-health-notes-row__actions {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
.wg-health-notes__load-more {
list-style: none;
}
.wg-health-notes__load-more-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: var(--space-md) var(--space-lg);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
}
.wg-health-notes__empty {
text-align: center;
color: var(--wg-fg-4);
padding: var(--space-lg);
}
.wg-health-notes__empty-msg {
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
}
/* Edit-note modal (Phase 8, Task 8). Shares the generic `.wg-modal` shell;
overlays a dual-line mono header with header-actions hosting the close
icon, Cancel, and Save buttons (kept visible above mobile keyboards), and
a gloss-inset textarea body. Every visual value resolves to
`--wg-health-modal-*` or shared `--wg-*` tokens. */
.wg-health-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.wg-health-modal__heading {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-health-modal__eyebrow {
padding: 0;
font-size: var(--wg-health-modal-eyebrow-size);
color: var(--wg-fg-3);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wg-health-modal__eyebrow::before {
content: none;
}
.wg-health-modal__title {
font-family: var(--wg-font-mono);
font-size: var(--wg-health-modal-title-size);
color: var(--wg-fg-1);
line-height: 1.1;
}
.wg-health-modal__body {
display: flex;
flex-direction: column;
gap: var(--wg-health-modal-section-gap);
}
.wg-health-modal__field {
display: flex;
flex-direction: column;
gap: var(--wg-health-modal-row-gap);
min-width: 0;
}
.wg-health-modal__label {
font-size: var(--wg-health-modal-label-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
font-weight: var(--font-weight-bold);
}
.wg-health-modal__input-wrap {
padding: var(--wg-health-modal-input-pad-y) var(--wg-health-modal-input-pad-x);
display: flex;
align-items: stretch;
min-width: 0;
}
.wg-health-modal__input {
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
box-shadow: none;
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
color: var(--wg-fg-1);
min-width: 0;
}
.wg-health-modal__input::placeholder {
color: var(--wg-fg-4);
}
.wg-health-modal__textarea {
resize: vertical;
min-height: 120px;
}
.wg-health-modal__header-actions {
display: flex;
gap: var(--space-xs);
align-items: center;
flex-shrink: 0;
}
.wg-health-modal__header-btn {
min-height: 36px;
padding: var(--space-xs) var(--space-sm);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
white-space: nowrap;
}
.wg-health-modal__header-btn--save {
padding: var(--space-xs) var(--space-md);
}
/* Meds schedule sub-tab (Phase 5, Task 4). `.wg-section-label` hour headers
bracket clusters of scheduled meds; each row is a `.wg-card` with a name
(mono-display), dosage, schedule summary, optional inventory tag, and a
trailing `.wg-icon-btn` cluster (Log / Edit / Delete). As-needed and
Archived groups reuse the same section-label header pattern. */
.wg-meds-section-label {
font-size: var(--wg-meds-hour-header-size);
}
.wg-meds-row {
display: grid;
grid-template-columns: var(--wg-meds-row-cols);
column-gap: var(--wg-meds-row-gap);
padding: var(--wg-meds-row-pad);
margin-bottom: var(--space-sm);
}
.wg-meds-row.archived {
opacity: 0.65;
}
.wg-meds-row__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-row__title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-sm);
min-width: 0;
}
.wg-meds-row__name {
font-size: var(--wg-meds-name-size);
color: var(--wg-fg-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.wg-meds-row__dosage {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-dosage-size);
color: var(--wg-fg-3);
letter-spacing: 0.02em;
}
.wg-meds-row__supplement {
flex-shrink: 0;
}
.wg-meds-row__schedule {
font-size: var(--font-size-sm);
color: var(--wg-fg-3);
}
.wg-meds-row__rx,
.wg-meds-row__dates {
font-family: var(--wg-font-mono);
font-size: var(--font-size-xs);
color: var(--wg-fg-4);
letter-spacing: 0.02em;
}
.wg-meds-row__inventory {
align-self: flex-start;
}
.wg-meds-row__actions {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
.wg-meds-row__log-btn {
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
padding: var(--space-xs) var(--space-md);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
}
.wg-meds-row__action-icons {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
/* Meds history sub-tab (Phase 5, Task 5). Two `.wg-gloss--inset` select
wraps sit atop a muted next-intake link row, followed by a day-grouped
list where each minute-cluster of intakes is a `.wg-card` row. Status
tokens come from `.wg-tag` + `.wg-tag--mono` variants so the paper-era
✅/⏳/❌ icons become mono-label pills. */
.wg-meds-filters {
display: flex;
gap: var(--wg-meds-filter-gap);
margin-bottom: var(--space-md);
}
.wg-meds-filters__field {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--wg-meds-filter-field-pad-y) var(--wg-meds-filter-field-pad-x);
min-width: 0;
}
.wg-meds-filters__label {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-filter-label-size);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wg-fg-4);
}
.wg-meds-filters__select {
appearance: none;
background: transparent;
border: none;
padding: 0;
color: var(--wg-fg-1);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
width: 100%;
cursor: pointer;
}
.wg-meds-filters__select:focus {
outline: none;
}
.wg-meds-next-intake-trigger {
display: block;
padding: var(--wg-meds-next-intake-pad-y) var(--wg-meds-next-intake-pad-x);
margin-bottom: var(--space-md);
color: var(--wg-fg-3);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
}
.wg-meds-next-intake-trigger:empty {
display: none;
}
.wg-meds-history {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.wg-meds-history__empty {
color: var(--wg-fg-4);
text-align: center;
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
margin: var(--space-lg) 0;
}
.wg-meds-history__day {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-history__day-label {
font-size: var(--wg-meds-history-day-size);
}
.wg-meds-history__rows {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-history__row {
display: flex;
align-items: center;
gap: var(--wg-meds-history-row-gap);
padding: var(--wg-meds-history-row-pad);
}
.wg-meds-history__row.cursor-pointer {
cursor: pointer;
}
.wg-meds-history__row-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-history__names {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.wg-meds-history__name {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-history-name-size);
color: var(--wg-fg-1);
}
.wg-meds-history__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.wg-meds-history__time {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-history-time-size);
color: var(--wg-fg-3);
letter-spacing: 0.04em;
}
.wg-meds-history__actions {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
.wg-meds-history__status {
white-space: nowrap;
}
/* Meds inventory sub-tab (Phase 5, Task 6). One `.wg-card` per medication
that tracks inventory. Each card shows the med name + dosage, a large
mono count + label, an optional low-stock alert pill, a muted
last-refilled row, and a trailing Refill button that toggles a
gloss-inset quantity input + confirm/cancel row underneath. */
.wg-meds-inventory {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-meds-inventory__empty {
color: var(--wg-fg-4);
text-align: center;
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
margin: var(--space-lg) 0;
}
.wg-meds-inventory__card {
display: grid;
grid-template-columns: 1fr auto;
column-gap: var(--wg-meds-inventory-card-gap);
row-gap: var(--wg-meds-inventory-card-gap);
align-items: center;
padding: var(--wg-meds-inventory-card-pad);
}
.wg-meds-inventory__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-inventory__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-sm);
}
.wg-meds-inventory__name {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-name-size);
color: var(--wg-fg-1);
}
.wg-meds-inventory__dosage {
color: var(--wg-fg-3);
font-size: var(--wg-meds-inventory-dosage-size);
font-family: var(--wg-font-mono);
}
.wg-meds-inventory__count-wrap {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-sm);
}
.wg-meds-inventory__count {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-inventory-count-size);
color: var(--wg-fg-1);
line-height: 1;
letter-spacing: 0.02em;
}
.wg-meds-inventory__count-label {
color: var(--wg-fg-3);
font-size: var(--wg-meds-inventory-count-label-size);
font-family: var(--wg-font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.wg-meds-inventory__low {
white-space: nowrap;
}
.wg-meds-inventory__refilled {
color: var(--wg-fg-4);
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-inventory-refilled-size);
letter-spacing: 0.04em;
}
.wg-meds-inventory__actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
.wg-meds-inventory__refill-btn {
white-space: nowrap;
}
.wg-meds-inventory__refill-form {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--wg-meds-inventory-refill-gap);
flex-wrap: wrap;
}
.wg-meds-inventory__refill-form[hidden] {
display: none;
}
.wg-meds-inventory__refill-input-wrap {
flex: 1 1 160px;
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--wg-meds-filter-field-pad-y) var(--wg-meds-filter-field-pad-x);
}
.wg-meds-inventory__refill-input-label {
color: var(--wg-fg-3);
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-filter-label-size);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.wg-meds-inventory__refill-input {
flex: 1;
border: none;
background: transparent;
color: var(--wg-fg-1);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
outline: none;
min-width: 0;
}
/* Food day navigator (Phase 4, Task 3). Three-cell row — chevron button,
center mono title + subtitle, chevron button. The hidden
lets the mono title trigger the native picker via showPicker(); the
"Today" chip slides in when the user navigates away from today. */
.wg-food-day-nav {
display: grid;
grid-template-columns:
var(--wg-food-day-nav-icon-size) 1fr var(--wg-food-day-nav-icon-size);
column-gap: var(--space-sm);
row-gap: var(--space-xs);
align-items: center;
margin-bottom: var(--space-md);
}
/* Round-2 Task 6 (defect #9). `--with-action` widens the grid to a trailing
`auto` column so the inline +Add sits beside the next-day chevron in a
single row: [< prev] [date] [next >] [Add]. Previously this rule lived
above the base `.wg-food-day-nav` declaration — equal specificity meant
the base rule's 3-column `grid-template-columns` won the cascade, so the
4th grid item (Add) spilled onto an implicit second row. Keeping the
override AFTER the base rule fixes the wrap. */
.wg-food-day-nav--with-action {
grid-template-columns:
var(--wg-food-day-nav-icon-size) 1fr var(--wg-food-day-nav-icon-size) auto;
}
.wg-food-day-nav__icon-btn {
width: var(--wg-food-day-nav-icon-size);
height: var(--wg-food-day-nav-icon-size);
min-width: var(--wg-food-day-nav-icon-size);
color: var(--wg-fg-1);
background: var(--wg-gloss-bg);
border: 1px solid var(--wg-border-strong);
border-radius: var(--wg-radius-icon);
box-shadow: var(--wg-gloss-shadow);
}
.wg-food-day-nav__icon-btn:disabled {
color: var(--wg-fg-4);
filter: brightness(0.85);
cursor: not-allowed;
}
.wg-food-day-nav__center {
position: relative;
text-align: center;
min-width: 0;
}
.wg-food-day-nav__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
border: 0;
padding: 0;
margin: 0;
}
.wg-food-day-nav__title {
font-size: var(--wg-food-day-nav-title-size);
cursor: pointer;
user-select: none;
}
.wg-food-day-nav__subtitle {
padding: 0;
margin: 0;
text-transform: uppercase;
font-size: var(--font-size-xs);
letter-spacing: 0.5px;
color: var(--wg-fg-3);
}
.wg-food-day-nav__subtitle::before {
content: none;
}
.wg-food-day-nav__week {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
pointer-events: none;
background: var(--wg-bg-card);
border: 1px solid var(--wg-border-hairline);
border-radius: var(--wg-radius-card);
color: var(--wg-fg-2);
}
/* Food meal-grouped item list (Phase 4, Task 5). Each meal is a
`.wg-food-meal-group` — a `.wg-section-label` header with a trailing mono
kcal total, followed by `.wg-card` rows for each logged item. Rows carry
name + grams on the left, sun-tinted kcal and a mono P/F macro line on the
right, with a trailing `.wg-icon-btn` cluster (edit + delete). Offline
pending / rejected logs get `.wg-tag--mono` badges, mirroring BP Phase 3. */
.wg-food-meal-group {
margin-bottom: var(--space-lg);
}
.wg-food-meal-group__header {
padding-top: var(--wg-section-label-pad-top);
padding-bottom: var(--space-sm);
gap: var(--wg-food-meal-header-gap);
}
.wg-food-meal-group__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.wg-food-meal-group__total {
font-size: var(--font-size-sm);
color: var(--wg-fg-2);
text-transform: none;
letter-spacing: 0;
}
.wg-food-meal-group__rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-food-item-row {
padding: var(--wg-food-item-row-pad);
display: flex;
align-items: center;
gap: var(--space-md);
cursor: pointer;
}
.wg-food-item-row__checkbox {
flex-shrink: 0;
}
.wg-food-item-row__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-food-item-row__name {
font-weight: var(--font-weight-medium);
color: var(--wg-fg-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wg-food-item-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-xs);
color: var(--wg-fg-3);
font-family: var(--wg-font-mono);
}
.wg-food-item-row__grams {
letter-spacing: 0.02em;
}
.wg-food-item-row__stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-xs);
min-width: 0;
}
.wg-food-item-row__kcal {
font-size: var(--font-size-sm);
color: var(--wg-sun);
font-weight: var(--font-weight-bold);
}
.wg-food-item-row__macros {
font-family: var(--wg-font-mono);
font-size: var(--font-size-xs);
color: var(--wg-fg-4);
letter-spacing: 0.02em;
}
.wg-food-item-row__actions {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
.wg-food-item-row--pending {
opacity: 0.85;
}
.wg-food-item-row--rejected {
border-color: var(--wg-tag-alert-border);
}
.wg-food-meal-list__empty {
padding: var(--space-lg) 0;
}
/* Meal DB / Food DB panels (Phase 4, Task 5 follow-up) — .wg-food-db-panel
wraps the sub-tab content shell; `.wg-food-db-card` applies to each row
alongside `.wg-card` so the gloss surface, hairline border, and inner
padding come from the shared card primitive. `.wg-food-db-panel__sort`
matches the sub-tab strip layout so Meal/Food DB share rhythm with the
daily log. */
.wg-food-db-panel {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-food-db-panel__hint {
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
color: var(--wg-fg-3);
margin: 0 0 var(--space-sm);
}
.wg-food-db-panel__search {
margin-bottom: var(--space-sm);
}
.wg-food-db-panel__sort {
display: flex;
gap: var(--wg-food-subtab-gap);
padding: var(--wg-food-subtab-pad-y) var(--wg-food-subtab-pad-x);
margin-bottom: var(--space-md);
}
.wg-food-db-panel__sort-btn {
flex: 1;
min-height: 36px;
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--wg-radius-gloss);
text-align: center;
}
.wg-food-db-panel__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.wg-food-db-panel__empty {
padding: var(--space-lg) 0;
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
color: var(--wg-fg-3);
text-align: center;
margin: 0;
}
.wg-food-db-panel__empty--error {
color: var(--wg-tag-alert-fg);
}
.wg-food-db-panel__pagination {
margin-top: var(--space-md);
}
.wg-food-db-panel__page-info {
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
color: var(--wg-fg-3);
letter-spacing: 0.02em;
}
.wg-food-db-panel__page-actions {
display: flex;
gap: var(--space-sm);
}
.wg-food-db-panel__page-btn {
min-height: 36px;
padding: var(--space-xs) var(--space-md);
font-family: var(--wg-font-mono);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
}
.wg-food-db-card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
cursor: pointer;
}
/* Edit-food modal (Phase 4, Task 6) — uses the shared `.wg-modal` shell
for positioning + chrome, then overlays the dual-line eyebrow/title
header, gloss-inset input wraps, three-up macros row, and bottom
Cancel/Save action bar. Every visual value reads from a `--wg-food-modal-*`
or shared `--wg-*` token. */
.wg-food-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.wg-food-modal__heading {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-food-modal__eyebrow {
padding: 0;
font-size: var(--wg-food-modal-eyebrow-size);
color: var(--wg-fg-3);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wg-food-modal__eyebrow::before {
content: none;
}
.wg-food-modal__title {
font-family: var(--wg-font-mono);
font-size: var(--wg-food-modal-title-size);
color: var(--wg-fg-1);
line-height: 1.1;
}
.wg-food-modal__body {
display: flex;
flex-direction: column;
gap: var(--wg-food-modal-section-gap);
}
.wg-food-modal__row {
display: flex;
gap: var(--wg-food-modal-row-gap);
align-items: flex-end;
}
.wg-food-modal__row--quick > .wg-food-modal__field--weight {
flex: 1 1 90px;
min-width: 0;
}
.wg-food-modal__row--quick > .wg-food-modal__field--barcode {
flex: 2 1 auto;
min-width: 0;
}
.wg-food-modal__row--macros > .wg-food-modal__field {
flex: 1 1 0;
min-width: 0;
}
.wg-food-modal__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-food-modal__field--name {
position: relative;
}
.wg-food-modal__label {
font-size: var(--wg-food-modal-eyebrow-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
font-weight: var(--font-weight-bold);
}
.wg-food-modal__input-wrap {
padding: var(--wg-food-modal-input-pad-y) var(--wg-food-modal-input-pad-x);
display: flex;
align-items: center;
min-width: 0;
}
.wg-food-modal__name-wrap {
position: relative;
}
.wg-food-modal__input {
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
box-shadow: none;
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
color: var(--wg-fg-1);
min-width: 0;
}
.wg-food-modal__input::placeholder {
color: var(--wg-fg-4);
}
.wg-food-modal__input--total-kcal {
font-size: var(--wg-food-total-kcal-input);
}
.wg-food-modal__barcode-row {
display: flex;
gap: var(--space-sm);
align-items: stretch;
min-width: 0;
}
.wg-food-modal__barcode-row > .wg-food-modal__input-wrap {
flex: 1 1 auto;
min-width: 0;
}
.wg-food-modal__scan-btn {
flex: 0 0 auto;
padding: var(--wg-food-modal-input-pad-y) var(--wg-food-modal-input-pad-x);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
}
.wg-food-modal__status {
margin: 0;
font-size: var(--font-size-xs);
}
.wg-food-modal__product-link {
font-size: var(--font-size-xs);
}
.wg-food-modal__section-label {
padding: 0;
}
.wg-food-modal__section-label::before {
content: none;
}
.wg-food-modal__per100g {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--wg-fg-3);
font-weight: var(--font-weight-normal);
cursor: pointer;
}
.wg-food-modal__per100g input {
margin: 0;
}
.wg-food-modal__header-actions {
display: flex;
gap: var(--space-xs);
align-items: center;
flex-shrink: 0;
}
.wg-food-modal__header-btn {
min-height: 36px;
padding: var(--space-xs) var(--space-sm);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
white-space: nowrap;
}
.wg-food-modal__header-btn--save {
padding: var(--space-xs) var(--space-md);
}
/* Edit-medication modal (Phase 5, Task 7) — shares the generic `.wg-modal`
shell for positioning and chrome; overlays a dual-line mono header, gloss
input wraps, schedule-type pill strip, times editor, inventory block,
toggle row, and the Cancel/Save action bar. Every visual value comes from
a `--wg-meds-modal-*` or shared `--wg-*` token. */
.wg-meds-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.wg-meds-modal__heading {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-meds-modal__eyebrow {
padding: 0;
font-size: var(--wg-meds-modal-eyebrow-size);
color: var(--wg-fg-3);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wg-meds-modal__eyebrow::before {
content: none;
}
.wg-meds-modal__title {
font-family: var(--wg-font-mono);
font-size: var(--wg-meds-modal-title-size);
color: var(--wg-fg-1);
line-height: 1.1;
}
.wg-meds-modal__body {
display: flex;
flex-direction: column;
gap: var(--wg-meds-modal-section-gap);
}
.wg-meds-modal__row {
display: flex;
gap: var(--wg-meds-modal-row-gap);
align-items: flex-end;
}
.wg-meds-modal__row > .wg-meds-modal__field {
flex: 1 1 0;
min-width: 0;
}
.wg-meds-modal__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-meds-modal__label {
font-size: var(--wg-meds-modal-label-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
font-weight: var(--font-weight-bold);
}
.wg-meds-modal__input-wrap {
padding: var(--wg-meds-modal-input-pad-y) var(--wg-meds-modal-input-pad-x);
display: flex;
align-items: center;
min-width: 0;
}
.wg-meds-modal__input {
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
box-shadow: none;
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
color: var(--wg-fg-1);
min-width: 0;
}
.wg-meds-modal__input::placeholder {
color: var(--wg-fg-4);
}
.wg-meds-modal__select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.wg-meds-modal__rx {
margin: 0;
font-size: var(--wg-meds-modal-rx-size);
color: var(--wg-fg-3);
font-family: var(--wg-font-mono);
display: none;
}
.wg-meds-modal__pills {
display: flex;
gap: var(--wg-meds-modal-pill-gap);
padding: var(--wg-meds-modal-pill-gap);
align-items: stretch;
}
.wg-meds-modal__pill {
flex: 1 1 0;
min-width: 0;
padding: var(--wg-meds-modal-pill-pad-y) var(--wg-meds-modal-pill-pad-x);
font-family: var(--wg-font-ui);
font-size: var(--wg-meds-modal-pill-size);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wg-fg-2);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
}
.wg-meds-modal__pill[aria-pressed="true"] {
color: var(--wg-ink);
}
.wg-meds-modal__hidden-select {
display: none;
}
.wg-meds-modal__days {
display: flex;
justify-content: space-between;
margin-bottom: 0;
}
.wg-meds-modal__days span {
width: var(--wg-meds-modal-day-size);
height: var(--wg-meds-modal-day-size);
}
.wg-meds-modal__times {
display: flex;
flex-direction: column;
gap: var(--wg-meds-modal-time-row-gap);
}
.wg-meds-modal__time-row {
display: flex;
gap: var(--wg-meds-modal-time-row-gap);
align-items: center;
margin-bottom: 0;
}
.wg-meds-modal__time-wrap {
flex: 1 1 auto;
}
.wg-meds-modal__remove-time {
flex: 0 0 auto;
font-size: var(--font-size-lg);
}
.wg-meds-modal__add-time {
align-self: flex-start;
padding: var(--wg-meds-modal-pill-pad-y) var(--wg-meds-modal-pill-pad-x);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
}
.wg-meds-modal__inventory-block {
gap: var(--wg-meds-modal-row-gap);
}
.wg-meds-modal__inventory {
display: flex;
flex-direction: column;
gap: var(--wg-meds-modal-row-gap);
}
.wg-meds-modal__inventory.hidden {
display: none;
}
.wg-meds-modal__restock {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.wg-meds-modal__restock-row {
display: flex;
gap: var(--wg-meds-modal-time-row-gap);
align-items: center;
}
.wg-meds-modal__restock-qty-wrap {
flex: 1 1 auto;
min-width: 0;
}
.wg-meds-modal__restock-add {
flex: 0 0 auto;
padding: var(--wg-meds-modal-pill-pad-y) var(--wg-meds-modal-pill-pad-x);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
}
.wg-meds-modal__restock-history {
font-size: var(--font-size-xs);
color: var(--wg-fg-3);
}
.wg-meds-modal__toggle-row {
display: flex;
flex-wrap: wrap;
gap: var(--wg-meds-modal-toggle-gap);
}
.wg-meds-modal__toggle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
color: var(--wg-fg-2);
cursor: pointer;
}
.wg-meds-modal__toggle input[type="checkbox"] {
margin: 0;
width: auto;
}
.wg-meds-modal__header-actions {
display: flex;
gap: var(--space-xs);
align-items: center;
flex-shrink: 0;
}
.wg-meds-modal__header-btn {
min-height: 36px;
padding: var(--space-xs) var(--space-sm);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
cursor: pointer;
white-space: nowrap;
}
.wg-meds-modal__header-btn--save {
padding: var(--space-xs) var(--space-md);
}
/* Take-meds (medication confirm) modal (Task 4b audit) — shares the generic
`.wg-modal` shell; overlays a sun-coloured eyebrow, mono title ("Time for
Meds"), subtitle (count / scheduled-for text), scrollable list of
checkbox-style rows (each row flips from dark-inset to green-highlight
when selected), a Snooze + Skip secondary actions row, and the full-width
sun "Confirm selected" primary button. Every visual value reads from a
`--wg-med-confirm-modal-*` or shared `--wg-*` token. */
.wg-med-confirm-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.wg-med-confirm-modal__heading {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.wg-med-confirm-modal__eyebrow {
padding: 0;
font-size: var(--wg-med-confirm-modal-eyebrow-size);
color: var(--wg-sun);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wg-med-confirm-modal__eyebrow::before {
content: none;
}
.wg-med-confirm-modal__title {
font-family: var(--wg-font-mono);
font-size: var(--wg-med-confirm-modal-title-size);
color: var(--wg-fg-1);
line-height: 1.1;
}
.wg-med-confirm-modal__subtitle {
font-size: var(--wg-med-confirm-modal-subtitle-size);
color: var(--wg-fg-3);
}
.wg-med-confirm-modal__close-btn {
flex-shrink: 0;
}
.wg-med-confirm-modal__time-edit {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.wg-med-confirm-modal__label {
font-size: var(--wg-med-confirm-modal-eyebrow-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
font-weight: var(--font-weight-bold);
}
.wg-med-confirm-modal__input-wrap {
padding: var(--space-md);
display: flex;
align-items: center;
min-width: 0;
}
.wg-med-confirm-modal__input {
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
box-shadow: none;
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
color: var(--wg-fg-1);
min-width: 0;
}
.wg-med-confirm-modal__list {
display: flex;
flex-direction: column;
gap: var(--wg-med-confirm-modal-row-gap);
margin-bottom: var(--space-md);
}
.wg-med-confirm-modal__row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--wg-med-confirm-modal-row-pad-y) var(--wg-med-confirm-modal-row-pad-x);
border-radius: var(--wg-radius-gloss);
background: var(--wg-gloss-bg-inset);
border: 1px solid var(--wg-border-hairline);
cursor: pointer;
min-width: 0;
}
.wg-med-confirm-modal__row--on {
background: var(--wg-tag-high-bg);
border-color: var(--wg-tag-high-border);
}
.wg-med-confirm-modal__row-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.wg-med-confirm-modal__check {
width: var(--wg-med-confirm-modal-check-size);
height: var(--wg-med-confirm-modal-check-size);
border-radius: var(--wg-med-confirm-modal-check-radius);
flex-shrink: 0;
background: var(--wg-bg-card-inset);
border: 1px solid var(--wg-border-hairline);
box-shadow: var(--wg-gloss-shadow-inset);
display: flex;
align-items: center;
justify-content: center;
}
.wg-med-confirm-modal__row--on .wg-med-confirm-modal__check {
background: var(--wg-tag-high-fg);
border-color: var(--wg-tag-high-border);
box-shadow: none;
position: relative;
}
.wg-med-confirm-modal__row--on .wg-med-confirm-modal__check::after {
content: '';
width: 8px;
height: 4px;
border-left: 2px solid var(--wg-ink);
border-bottom: 2px solid var(--wg-ink);
transform: rotate(-45deg) translate(1px, -1px);
}
.wg-med-confirm-modal__row-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.wg-med-confirm-modal__row-name {
font-family: var(--wg-font-ui);
font-size: var(--wg-med-confirm-modal-name-size);
color: var(--wg-fg-1);
font-weight: var(--font-weight-bold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wg-med-confirm-modal__secondary-actions {
display: flex;
gap: var(--wg-med-confirm-modal-action-gap);
margin-bottom: var(--wg-med-confirm-modal-action-gap);
}
.wg-med-confirm-modal__secondary {
flex: 1 1 0;
padding: var(--space-md);
font-family: var(--wg-font-ui);
font-size: var(--font-size-sm);
border-radius: var(--wg-radius-gloss);
}
.wg-med-confirm-modal__secondary--skip {
color: var(--wg-tag-alert-fg);
}
.wg-med-confirm-modal__primary {
width: 100%;
padding: var(--space-md);
font-family: var(--wg-font-ui);
font-size: var(--font-size-md);
border-radius: var(--wg-radius-gloss);
}
/* Wandergeek toggle primitive (Phase 9, Task 1). Renders a pill with a
knob driven by a hidden . The unchecked state
uses --wg-toggle-bg (inset-gloss); the checked state flips to
--wg-toggle-bg-on (the sun gradient) so the toggle visually matches
the `.wg-gloss--sun` convention used for primary actions everywhere
else in the Wandergeek system. Focus-visible and disabled states are
tokenized via --wg-toggle-border-{focus,disabled}. */
.wg-toggle {
position: relative;
display: inline-block;
width: var(--wg-toggle-width);
height: var(--wg-toggle-height);
flex-shrink: 0;
cursor: pointer;
}
.wg-toggle__input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
inset: 0;
cursor: pointer;
}
.wg-toggle__track {
position: absolute;
inset: 0;
background: var(--wg-toggle-bg);
border: 1px solid var(--wg-toggle-border);
border-radius: var(--wg-radius-pill);
box-shadow: var(--wg-gloss-shadow-inset);
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
pointer-events: none;
}
.wg-toggle__knob {
position: absolute;
top: var(--wg-toggle-knob-pad);
left: var(--wg-toggle-knob-pad);
width: var(--wg-toggle-knob-size);
height: var(--wg-toggle-knob-size);
background: var(--wg-toggle-knob);
border-radius: var(--radius-pill);
transition: transform 160ms ease, background 160ms ease;
pointer-events: none;
}
.wg-toggle__input:checked ~ .wg-toggle__track {
background: var(--wg-toggle-bg-on);
box-shadow: var(--wg-gloss-shadow-sun);
}
.wg-toggle__input:checked ~ .wg-toggle__knob {
background: var(--wg-toggle-knob-on);
transform: translateX(calc(var(--wg-toggle-width) - var(--wg-toggle-knob-size) - var(--wg-toggle-knob-pad) - var(--wg-toggle-knob-pad)));
}
.wg-toggle__input:focus-visible ~ .wg-toggle__track {
outline: 2px solid var(--wg-toggle-border-focus);
outline-offset: 2px;
}
.wg-toggle__input:disabled ~ .wg-toggle__track {
border-color: var(--wg-toggle-border-disabled);
opacity: 0.6;
}
.wg-toggle__input:disabled ~ .wg-toggle__knob {
opacity: 0.6;
}
.wg-toggle--disabled {
cursor: not-allowed;
}
/* Settings row shell used by — full spec in Phase 9,
Task 2 (section cards + row list). Minimum viable layout lives here so
the Task 1 rewrite of MTSettingToggle renders meaningfully even before
the card shell lands. */
.wg-settings-row {
display: grid;
grid-template-columns: var(--wg-settings-row-cols);
gap: var(--wg-settings-row-gap);
align-items: center;
padding: var(--wg-settings-row-pad-y) var(--wg-settings-row-pad-x);
}
.wg-settings-row + .wg-settings-row {
border-top: var(--wg-settings-row-divider);
}
.wg-settings-row__content {
min-width: 0;
}
.wg-settings-row__title {
margin: 0;
font-family: var(--wg-font-ui);
font-size: var(--wg-settings-title-size);
font-weight: var(--font-weight-medium);
color: var(--wg-fg-1);
}
.wg-settings-row__desc {
margin: var(--space-xs) 0 0 0;
font-family: var(--wg-font-ui);
font-size: var(--wg-settings-desc-size);
color: var(--wg-fg-3);
}
.wg-settings-row__control {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Sectioned card shell (Phase 9, Task 2) — groups titled settings rows into
a `.wg-card` with a mono header, optional uppercase eyebrow, and an
optional muted description. The `.wg-settings-row-list` child container
holds the caller-provided rows (toggles, inputs, buttons) and inherits
the token'd row hairline divider from `.wg-settings-row + .wg-settings-row`. */
.wg-settings-section {
display: flex;
flex-direction: column;
gap: var(--wg-settings-section-gap);
padding: var(--wg-settings-section-pad);
}
.wg-settings-section__eyebrow {
padding: 0;
}
.wg-settings-section__title {
margin: 0;
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-title-size);
font-weight: var(--font-weight-medium);
color: var(--wg-fg-1);
letter-spacing: 0.02em;
}
.wg-settings-section__desc {
margin: 0;
font-family: var(--wg-font-ui);
font-size: var(--wg-settings-desc-size);
color: var(--wg-fg-3);
}
.wg-settings-row-list {
display: flex;
flex-direction: column;
}
/* Read-only info rows (Phase 9, Task 2) — used by the Timezone card. The
label is a short uppercase eyebrow; the value is a mono display string.
Layout is a max-content + 1fr grid driven by `--wg-settings-info-grid-*`
tokens so multiple info rows inside a `.wg-card--inset` container align
their label columns. */
.wg-settings-info-row {
display: grid;
grid-template-columns: var(--wg-settings-info-grid-cols);
gap: var(--wg-settings-info-grid-gap);
align-items: baseline;
padding: var(--wg-settings-row-pad-y) 0;
}
.wg-settings-info-row + .wg-settings-info-row {
border-top: var(--wg-settings-row-divider);
}
.wg-settings-info-row__label {
font-family: var(--wg-font-ui);
font-size: var(--wg-settings-info-label-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-4);
}
.wg-settings-info-row__value {
font-size: var(--wg-settings-info-value-size);
color: var(--wg-fg-1);
min-width: 0;
overflow-wrap: anywhere;
}
/* Info-grid frame (Phase 9, Task 3). Wraps the Timezone card's info rows
in a `.wg-gloss--inset` panel so each value reads against the same
inset-glass surface used for numeric input wraps. */
.wg-settings-info-grid {
padding: var(--wg-settings-row-pad-y) var(--wg-settings-section-pad);
}
/* Muted footnote below an info-grid (e.g. timezone change warning). */
.wg-settings-info-note {
margin: var(--wg-settings-section-gap) 0 0 0;
font-family: var(--wg-font-ui);
font-size: var(--wg-settings-desc-size);
color: var(--wg-fg-3);
}
.wg-settings-info-note:empty {
display: none;
}
/* Utility — hide a settings-view element without inline styles. Used by
`sync.js` to toggle the sync status bar off before the first update
tick and by any future empty-state gating. */
.wg-settings-hidden {
display: none !important;
}
/* Hide the OIDC setup card when the flow is disabled (container stays in
the DOM so app.js can populate it, but nothing should render visually
when it's empty). */
.wg-settings-oidc:empty {
display: none;
}
/* Notifications card (Phase 9, Task 4) — webpush status pill + action-row
buttons share this section. The status pill uses the Wandergeek tag
triplets (`--wg-tag-normal-*` / `--wg-tag-alert-*` / neutral hairline)
via the `.wg-tag--mono--success` / `--alert` / `--muted` variants. The
legacy `.status-success` / `.status-error` / `.status-muted` class
names survive as aliases so any code that still sets them resolves to
the same token'd styling. */
.wg-settings-webpush-status {
margin: 0;
padding: var(--space-sm) var(--space-md);
border-radius: var(--wg-radius-gloss);
border: 1px solid transparent;
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-desc-size);
letter-spacing: 0;
}
.wg-tag--mono--success,
.wg-settings-webpush-status.status-success {
background: var(--wg-tag-normal-bg);
color: var(--wg-tag-normal-fg);
border-color: var(--wg-tag-normal-border);
}
.wg-tag--mono--alert,
.wg-settings-webpush-status.status-error {
background: var(--wg-tag-alert-bg);
color: var(--wg-tag-alert-fg);
border-color: var(--wg-tag-alert-border);
}
.wg-tag--mono--muted,
.wg-settings-webpush-status.status-muted {
background: transparent;
color: var(--wg-fg-3);
border-color: var(--wg-border-hairline);
}
/* Action-row inside a settings row — lays out two inline action buttons
(Test Meds / Test BP) with a token'd gap instead of `margin-left`. */
.wg-settings-action-row {
display: flex;
flex-wrap: wrap;
gap: var(--wg-settings-action-row-gap);
justify-content: flex-end;
}
.wg-settings-action-btn {
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-desc-size);
padding: var(--space-xs) var(--space-md);
border: none;
color: var(--wg-fg-1);
cursor: pointer;
}
/* Food Targets number-field grid (Phase 9, Task 6). A 2×2 grid of
number fields for calories / carbs / protein / fat. Each field is a
stacked mono uppercase label + a `.wg-gloss--inset` input wrap with a
trailing unit tag. No inline styles, no hardcoded spacing — every
value comes from a `--wg-settings-number-*` token. */
.wg-settings-number-grid {
display: grid;
grid-template-columns: var(--wg-settings-number-grid-cols);
gap: var(--wg-settings-number-grid-gap);
}
.wg-settings-number-field {
display: flex;
flex-direction: column;
gap: var(--wg-settings-number-field-gap);
min-width: 0;
}
.wg-settings-number-field__label {
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-number-field-label-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
font-weight: var(--font-weight-bold);
}
.wg-settings-number-field__wrap {
display: flex;
align-items: center;
gap: var(--space-sm);
min-height: var(--wg-settings-number-field-height);
padding: 0 var(--wg-settings-number-field-pad-x);
min-width: 0;
}
.wg-settings-number-field__input {
flex: 1 1 0;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
box-shadow: none;
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
color: var(--wg-fg-1);
min-width: 0;
}
.wg-settings-number-field__input::placeholder {
color: var(--wg-fg-4);
}
.wg-settings-number-field__unit {
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-number-field-unit-size);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wg-fg-3);
flex-shrink: 0;
}
/* Full-width primary Save button inside the Food Targets section —
`.wg-gloss--sun` carries the glossy gradient; this class adds the
full-width layout + min-height so the button matches the other
Wandergeek save actions. */
.wg-settings-save-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
min-height: var(--wg-settings-save-btn-min-height);
padding: var(--space-md) var(--space-lg);
font-family: var(--wg-font-mono);
font-size: var(--font-size-md);
border: none;
border-radius: var(--wg-radius-gloss);
color: var(--wg-fg-1);
cursor: pointer;
}
/* Version footer (Phase 9, Task 7) — mono eyebrow + short-hash value
centered below the last settings section. Sits outside any card so it
reads as metadata, not content. Value text is the `VERSION_PLACEHOLDER`
string swapped at deploy time. */
.wg-settings-version {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--wg-settings-version-pad) var(--space-md) var(--space-md);
font-family: var(--wg-font-mono);
font-size: var(--wg-settings-version-size);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.wg-settings-version__label {
color: var(--wg-fg-4);
}
.wg-settings-version__value {
color: var(--wg-fg-3);
}