` block below, so the `` only
* needs its default browser margins zeroed. Wraps cleanly at 320 px by
* inheriting the card's natural width. */
.plan-revision-panel__summary-subline {
margin: 0;
color: var(--pels-text-supporting-color);
}
/* Per-revision log card on the smart-task history detail page (v2.7.2 PR 5).
* One row per replan; the producer (`formatPlanHistoryRevisionEntry`) resolves
* the visible strings so the view layer only positions them. Rows stack
* vertically; on the 320–480 px target widths the time/reason/diff segments
* sit on one line whenever they fit and wrap onto the next line otherwise. */
.plan-revision-log {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.plan-revision-row {
/* Three columns: time (5ch tabular), reason (absorbs), diff (auto).
* Switched from flex+wrap to grid so on 320 px viewports the reason can
* wrap onto multiple lines without dragging the diff chip with it — the
* diff column stays glued to the right and the reason just gets taller.
* Replaces the earlier flex layout where a long reason pushed the chip
* to the bottom-right of the wrapped row and read like it belonged to
* the next row. */
display: grid;
grid-template-columns: 5ch 1fr auto;
align-items: baseline;
gap: var(--spacing-1) var(--spacing-2);
padding: var(--spacing-1) var(--spacing-2);
background: var(--pels-surface-container-low);
border-radius: var(--radius-sm);
}
.plan-revision-time {
color: var(--pels-text-supporting-color);
font-variant-numeric: tabular-nums;
}
.plan-revision-reason {
color: var(--pels-text-primary);
/* min-width: 0 lets the grid track shrink below the reason's intrinsic
* width so long labels wrap inside the column instead of expanding it. */
min-width: 0;
}
.plan-revision-diff {
color: var(--pels-text-supporting-color);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-sm);
/* Hint to the user that the chip carries an aria-label tooltip when they
* hover. No-op visually but matches the m3 disclosure pattern for chips. */
cursor: default;
}
/* v2.7.3 — Succeeded "receipt" timeline rendered below the outcome headline.
* Three rows max, each carrying a leading dot + tabular-nums clock + label +
* optional detail tail. tabular-nums keeps the time column aligned across
* rows; the dot is a small accent-toned marker (no SVG/icon dependency) so
* the timeline reads as a receipt rather than a generic list. */
.plan-history-detail__receipt {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.plan-history-detail__receipt-row {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: baseline;
gap: var(--spacing-1) var(--spacing-2);
padding: var(--spacing-1) 0;
}
.plan-history-detail__receipt-dot {
/* 8 px dot — bound to `--spacing-2` so a token bump nudges this with the
* rest of the receipt rhythm (v2.7.3 P2 token-binding fold-in). */
width: var(--spacing-2);
height: var(--spacing-2);
border-radius: var(--radius-full);
background: var(--color-role-accent);
align-self: center;
}
.plan-history-detail__receipt-time {
color: var(--pels-text-primary);
font-variant-numeric: tabular-nums;
font-weight: var(--font-weight-semibold);
min-width: 4.5ch;
}
.plan-history-detail__receipt-label {
color: var(--pels-text-primary);
}
.plan-history-detail__receipt-detail {
/* Detail tail spans from the time column through the end of the row,
* wrapping onto a fresh line beneath the time + label pair so it never
* crowds the label on narrow widths. Muted weight keeps the time the
* loudest token in the row. */
grid-column: 2 / -1;
color: var(--pels-text-secondary);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
/* Cost narrative chip (Succeeded + Missed). Renders as a paragraph wrapping
* the existing `.plan-chip--muted` primitive — the wrapper exists so the
* chip has its own row, not so we override its tone. */
.plan-history-detail__cost-narrative {
margin: 0;
}
.plan-history-detail__cost-narrative-chip {
white-space: normal;
font-size: var(--font-size-sm);
}
/* Missed shortfall summary chip. Same chip primitive as the cost narrative;
* separate wrapper class lets us tune the row independently if the rhythm
* needs adjustment later. */
.plan-history-detail__shortfall {
margin: 0;
}
.plan-history-detail__shortfall-chip {
white-space: normal;
font-size: var(--font-size-sm);
}
/* Abandoned `` disclosure — Android-flavoured Material expansion
* (chevron, not iOS arrow). The summary is the affordance; the body is a
* quiet list that the user opts into. */
.plan-history-detail__abandoned-details {
margin: 0;
}
.plan-history-detail__abandoned-summary {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
min-height: var(--pels-touch-target-min);
padding: var(--spacing-1) var(--spacing-2);
border-radius: var(--radius-md);
color: var(--pels-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
list-style: none;
}
/* Hide the default disclosure triangle in WebKit so we can rely on the
* `::before` chevron below. Firefox respects `list-style: none` already. */
.plan-history-detail__abandoned-summary::-webkit-details-marker {
display: none;
}
.plan-history-detail__abandoned-summary::before {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
transform: rotate(-45deg);
transition: transform var(--transition-fast);
}
.plan-history-detail__abandoned-details[open]
> .plan-history-detail__abandoned-summary::before {
transform: rotate(45deg);
}
.plan-history-detail__abandoned-summary:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
.plan-history-detail__abandoned-body {
list-style: none;
margin: var(--spacing-2) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.plan-history-detail__abandoned-line {
color: var(--pels-text-secondary);
font-size: var(--font-size-sm);
}
.pels-meter-track {
position: relative;
height: 14px;
overflow: visible;
border-radius: var(--radius-full);
background: color-mix(in srgb, var(--pels-surface-container-highest) 80%, transparent);
}
/* Single-segment fill (energy meter). The width and tone are set inline by the
component because the width depends on the dynamic scale. */
.pels-meter-track__fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: var(--pels-status-good);
pointer-events: none;
}
.pels-meter-track__fill[data-tone="warning"] {
background: var(--pels-status-warning);
}
.pels-meter-track__fill[data-tone="critical"] {
background: var(--pels-status-critical);
}
/* Segmented power-bar fill: managed | background. Free space is the empty
track remainder. The safe-pace marker rides on top. */
.pels-meter-segments {
position: absolute;
inset: 0;
display: flex;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
}
.pels-meter-segments__seg {
display: block;
height: 100%;
}
.pels-meter-segments__seg--managed {
background: var(--pels-status-good);
}
/* State-coloured fill per the hero spec's status tones: under safe pace the
WHOLE fill reads success-toned — managed at full mint, background as a
dimmer step of the same success tone — so an all-background household no
longer sees a grey-on-grey gauge. The two segments stay distinguishable
(bright vs dim), and the supporting "Managed X kW · Background Y kW" line
carries the split meaning (colour never carries meaning alone). Above the
safe pace the trailing segment flips to the warning tone below. */
.pels-meter-segments__seg--background {
background: color-mix(in srgb, var(--pels-status-good) 42%, var(--pels-surface-container-high));
}
/* When current power crosses the safe pace, the trailing rendered segment
carries the warning tone so the over-threshold portion reads as an overflow
stripe. The tone applies to the background segment when it is present,
otherwise to the managed segment so a managed-only overflow still surfaces
visually. There is no instantaneous over-hard-cap tone — the cap is an
hourly-average ceiling; the critical story lives on the chip/rim and the
energy bar's projection marker. */
.pels-meter-segments__seg--background[data-over-safe-pace],
.pels-meter-segments__seg--managed[data-over-safe-pace] {
background: var(--pels-status-warning);
}
/* v2.7.3 managed-segment breathing: a single live moment on the Overview hero
* while PELS is actively limiting. Opacity-only oscillation (0.85 ↔ 1.0) over
* 3.5s; no hue shift, no scale change. The hero is the single source of "PELS
* is doing something right now" — keep the motion contained here. */
@keyframes pels-managed-breathing {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: no-preference) {
.pels-meter-segments__seg--managed[data-limiting] {
animation: pels-managed-breathing 3.5s ease-in-out infinite;
}
}
/* Sublegend below a hero meter — renders only when the bar carries two or
more markers (single-marker bars rely on the per-marker `aria-label` and
the visible position alone). Swatch geometry mirrors the matching
`.pels-meter-track__marker--*` rule so the legend reads as a key. */
.plan-hero__legend {
display: flex;
flex-flow: row wrap;
gap: var(--spacing-1) var(--spacing-3);
margin-top: var(--spacing-1);
color: var(--text-secondary);
font-size: var(--font-size-xs);
line-height: var(--font-line-height-tight);
}
.plan-hero__legend-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-1);
}
/* Legend swatches render as MINI-TRACKS: a short rounded track sample with
the marker glyph riding on it, exactly as it appears on the real bar. A
bare vertical tick or hollow dot floating beside its label reads as ASCII
punctuation ("| Safe pace", "o Projected") — the track underneath is what
makes each glyph read as a key to the meter. The default tone is the
neutral secondary-text reference used by the target/safe-pace marker; the
projected swatch overrides it per status tone below. */
.plan-hero__legend-swatch {
--legend-tone: var(--pels-text-secondary);
position: relative;
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 10px;
border-radius: var(--radius-full);
background: var(--pels-surface-container-highest);
overflow: visible;
}
.plan-hero__legend-swatch::after {
content: "";
position: absolute;
}
/* Thin threshold tick, centred on the mini-track (mirrors --marker--target,
including its surface-toned separation halo). */
.plan-hero__legend-swatch--target::after {
top: 50%;
left: 50%;
width: 3px;
height: 12px;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: var(--legend-tone);
box-shadow: 0 0 0 1px var(--pels-surface-container-highest);
}
/* Hard-cap reference tick: warning-toned, centred on the mini-track like the
real marker (which renders wherever the cap value falls on the scale —
legitimately even left of the safe-pace tick late in an under-used hour). */
.plan-hero__legend-swatch--cap::after {
top: 50%;
left: 50%;
width: 4px;
height: 12px;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: var(--pels-status-warning);
box-shadow: 0 0 0 1px var(--pels-surface-container-highest);
}
/* Hollow projected dot, centred on the mini-track (mirrors
--marker--projected). */
.plan-hero__legend-swatch--projected::after {
top: 50%;
left: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
border: 2px solid var(--legend-tone);
border-radius: var(--radius-full);
background: var(--pels-surface-container-high);
}
.plan-hero__legend-swatch--projected[data-tone="good"] {
--legend-tone: var(--pels-status-good);
}
.plan-hero__legend-swatch--projected[data-tone="warning"] {
--legend-tone: var(--pels-status-warning);
}
.plan-hero__legend-swatch--projected[data-tone="critical"] {
--legend-tone: var(--pels-status-critical);
}
.pels-meter-track__marker {
--marker-tone: var(--text);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
cursor: help;
z-index: 1;
}
.pels-meter-track__marker[data-tone="good"] {
--marker-tone: var(--pels-status-good);
}
.pels-meter-track__marker[data-tone="warning"] {
--marker-tone: var(--pels-status-warning);
}
.pels-meter-track__marker[data-tone="limited"] {
--marker-tone: var(--pels-status-limited);
}
.pels-meter-track__marker[data-tone="critical"] {
--marker-tone: var(--pels-status-critical);
}
.pels-meter-track__marker::before {
content: "";
position: absolute;
inset: -8px;
}
.pels-meter-track__marker--projected {
width: 8px;
height: 8px;
border: 2px solid var(--marker-tone);
border-radius: var(--radius-full);
background: var(--pels-surface-container);
}
/* Target / cap markers extend a half-pixel on each side via box-shadow so
sub-pixel rendering does not leave a hairline gap between the marker body
and the trailing edge of the colored fill when the bar reaches (or just
crosses) the marker position. The shadow inherits the marker tone so it
reads as a continuation of the marker, not a halo.
The target (safe-pace / budget-this-hour) marker is a neutral "stay under
here" reference line, NOT a status. It uses the semantic secondary-text tone
so it reads as a calm guideline that stays legible on both the filled and
empty portions of the track in dark and light themes — and stays visually
distinct from the warning-toned hard-cap marker. The legend swatch and
per-marker aria-label/tooltip name it explicitly. */
.pels-meter-track__marker--target {
width: 3px;
height: 14px;
border-radius: var(--radius-full);
background: var(--pels-text-secondary);
/* Ring in the track-surface tone (not the marker tone) so the neutral grey
"stay under here" tick stays separated from whatever fill sits under it.
In the over-threshold state the fill behind the marker is
`--pels-status-warning` (amber), where a bare grey tick is only ~2:1; the
surface-toned halo carves a gap on both the mobile-dark and desktop-light
canvases so the marker reads against the amber (and the managed-green)
fill. On the empty track the halo matches the track and is invisible. */
box-shadow: 0 0 0 1px var(--pels-surface-container-highest);
}
.pels-meter-track__marker--cap {
width: 4px;
height: 14px;
border-radius: var(--radius-full);
background: var(--pels-status-warning);
/* Surface-toned separation halo, same trick as the target marker above: the
over-safe-pace overflow fill is ALSO `--pels-status-warning`, so a bare
amber tick (or an amber-toned shadow) disappears into it exactly when the
user goes looking for the cap line. The halo carves a track-toned gap on
any fill; on the empty track it matches the surface and is invisible. */
box-shadow: 0 0 0 1px var(--pels-surface-container-highest);
transform: translate(-100%, -50%);
}
.plan-hero__chips {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--spacing-1) var(--spacing-2);
margin-bottom: var(--spacing-4);
min-width: 0;
}
.plan-hero__chip-rail {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-1) var(--spacing-2);
align-items: center;
flex: 1 1 auto;
min-width: 0;
}
/* Info-icon button anchored to the top-right of the chip row. The Material
icon-button state-layer fills the touch target; the icon glyph stays at
20 px. Touch target follows the M3 minimum (`--pels-touch-target-min`,
48 px) — the previous 36 px state layer was below the project floor and
off-screen at 320 px because the surrounding overflow pushed it past the
viewport. */
.plan-hero__info-button {
flex: 0 0 auto;
align-self: flex-start;
/* The 48 px touch target must not inflate the chip row (chips are ~24 px):
pull the state layer's vertical overflow out of layout — the standard M3
icon-button overlap — so the header row hugs the chips instead of adding
~25 px of dead space above "Power now", and the glyph centers on the chip
axis instead of sitting ~10 px below it. Hit area is unchanged. */
margin-block: calc((var(--pels-touch-target-min) - var(--spacing-6)) / -2);
--md-icon-button-state-layer-height: var(--pels-touch-target-min);
--md-icon-button-state-layer-width: var(--pels-touch-target-min);
--md-icon-button-icon-size: 20px;
--md-icon-button-icon-color: var(--pels-text-secondary);
--md-icon-button-hover-icon-color: var(--pels-text-primary);
--md-icon-button-focus-icon-color: var(--pels-text-primary);
--md-icon-button-pressed-icon-color: var(--pels-text-primary);
}
.plan-hero__info-icon {
width: 20px;
height: 20px;
display: block;
}
.plan-hero__section {
display: grid;
gap: var(--pels-hero-section-gap);
}
.plan-hero__section + .plan-hero__section {
padding-top: calc(var(--spacing-4) + var(--spacing-1));
}
/* Hero section label. Historically this carried the all-caps `.eyebrow`
marketing overline above every hero heading. The M3 alignment pass (TODO #5)
drops that idiom in favour of Homey-native single-weight sentence-case
section labels so the display heading leads. The element keeps the `.eyebrow`
class in markup (a11y `aria-labelledby` targets + the hero-rebind contract
depend on it), but this rule overrides the eyebrow's uppercase transform and
letter-spacing so it renders as a quiet, sentence-case label. */
.plan-hero__section-label {
text-transform: none;
letter-spacing: 0;
font-size: var(--pels-text-section-label-font-size);
font-weight: var(--pels-text-section-label-font-weight);
line-height: var(--pels-text-section-label-font-line-height);
color: var(--pels-text-section-label-color);
}
.plan-hero__headline-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-2);
flex-wrap: wrap;
}
/* Device-hero decorator (after the canonical rule per the cascade idiom):
the trailing power fact reads at the supporting size beside a
display-size state word, and centre alignment floats it mid-cap-height —
this hero's headline row aligns to baseline instead (the Overview metric
row makes the same choice). */
.device-detail-live-status .plan-hero__headline-row {
align-items: baseline;
}
/* M3: one tonal story per surface. Hero rim + status chip carry the warn/alert
signal; the headline value stays neutral. */
.plan-hero__headline {
/* `margin: 0` resets the legacy `.pels-hero h2 { margin: 4px 0 0 }`
cascade so the consolidated primitive owns its own block-start spacing.
Before the batch-7 rebind only Smart-tasks rendered the headline via
`.plan-hero__headline`; afterwards Budget / Usage / Settings / Advanced
all do too, so the legacy 4 px nudge would otherwise leak onto five
surfaces. */
margin: 0;
color: var(--pels-text-display-color);
font-size: var(--pels-text-display-font-size);
font-weight: var(--pels-text-display-font-weight);
line-height: var(--pels-text-display-font-line-height);
letter-spacing: 0;
/* Tabular numerals so metric headlines don't reflow/jitter as digits change
between render cycles (e.g. "0.3" → "0.4" → "12.0"). */
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Numeric-first metric headline: the value leads as the dominant element, the
unit/qualifier trails smaller and quieter beneath it. Used by the Overview
"Power now" + "Energy used this hour" heroes. */
.plan-hero__metric {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-1);
}
.plan-hero__metric-value {
font-size: var(--pels-text-display-font-size);
font-weight: var(--pels-text-display-font-weight);
line-height: var(--pels-text-display-font-line-height);
}
.plan-hero__metric-qualifier {
font-size: var(--pels-text-supporting-font-size);
font-weight: var(--font-weight-medium);
line-height: var(--pels-text-supporting-font-line-height);
color: var(--pels-text-supporting-color);
}
/* Scale the hero display type down on the narrowest viewports (≤360px, the
320px floor included) so long display headings and metric values never
overflow the hero card. */
@media (max-width: 360px) {
.plan-hero__headline,
.plan-hero__metric-value {
font-size: var(--font-size-headline-md);
}
}
.plan-hero__subline {
color: var(--pels-text-supporting-color);
font-size: var(--pels-text-supporting-font-size);
line-height: var(--pels-text-supporting-font-line-height);
}
/* M3: one tonal story per surface. The hero rim + status chip + power-bar
overshoot carry the warn/alert signal — the subline stays neutral primary.
`data-tone` is still honoured on the warn rung so projection sublines (which
never escalate beyond warn) remain legible at a glance, but the critical /
alert rung renders identical to the default subline copy: red headline +
red subline + red chip + red rim was four redundant tonal voices. */
.plan-hero__subline[data-tone="warn"],
.pels-hero__subline[data-tone="warn"] {
color: var(--pels-status-on-warning);
}
.plan-hero__subline--muted {
color: var(--pels-text-supporting-color);
}
/* v2.7.3 anticipation subline: surfaces the next cheap window beneath the
* energy section so the user can plan high-load appliances. Sits below the
* energy bar (after `.plan-hero__bar-group`) with a small breathing margin so
* it reads as a third tier of information rather than another header. Accent
* color stays muted — anticipation is information, not a call to action. */
.plan-hero__subline--anticipation {
margin-top: var(--spacing-2);
color: var(--pels-text-supporting-color);
}
/* Queued-headline "why" subline (e.g. "Waiting for tomorrow's prices through
* HH:MM"). Sits between the headline and the device/target subline so the
* user reads it as a direct answer to the headline. Primary-supporting tone
* keeps it readable without escalating to a warn voice — the hero is on-track
* at this point. */
.plan-hero__subline--reason {
color: var(--pels-text-primary);
}
/* Pending-hero "why is this still building?" body copy (e.g. "PELS needs a
* current state of charge…", "Learning energy use — needs power readings from
* this device."). Sits in the metaLine slot but, unlike the ready hero's
* recap meta lines, this is the most actionable string on the surface — it
* tells the user exactly which lever to pull. Bumped to `--pels-text-primary`
* so it reads at default body weight instead of being demoted to the muted
* secondary tone. Typography (size + line-height) inherits from the base
* `.plan-hero__subline` rule so the cadence with the device/target subline
* directly above it stays consistent. */
.plan-hero__subline--action {
color: var(--pels-text-primary);
}
/* Smart-task detail hero density. The cannot-finish hero stacks a target/why
* subline above a group of muted meta lines (`Needs … · kW · hours`, the
* delivered-so-far line, and the cost line). At the section's 4 px grid gap
* those collapse into one dense block on a 320–480 px webview. Add a tier
* between the non-muted subline and the muted meta group, plus a hair more
* between consecutive muted lines, so "what / why" reads apart from "the
* numbers". These margins are intentionally *additive* to the section's
* 4 px grid gap, so the effective separation is 12 px (subline → meta group)
* and 8 px (between muted lines) — a deliberate two-step rhythm over the 4 px
* baseline, not a replacement for it. Scoped to `#deadline-plan-panel` so the
* Overview / Budget heroes (whose muted lines follow a `headline-row`, not a
* subline) keep their tighter rhythm untouched. */
#deadline-plan-panel .plan-hero__subline--muted + .plan-hero__subline--muted {
margin-top: var(--spacing-1);
}
#deadline-plan-panel .plan-hero__subline:not(.plan-hero__subline--muted)
+ .plan-hero__subline--muted {
margin-top: var(--spacing-2);
}
/* Cannot-finish remedy line. On the alert hero the meta line opens with the
* remedy sentence ("Not enough time for this target. Lower the target or move
* the deadline.") — the most actionable string on the surface — so it renders
* at the primary body tone instead of the muted supporting tone the recap
* lines use. The adjacent-sibling selector targets exactly the meta line (the
* first muted subline after the device/target subline); the delivered-so-far
* and cost recap lines below it stay muted. Token swap only, mirroring
* `.plan-hero__subline--action` on the pending hero. Bare `[data-tone="alert"]`
* (instead of `.plan-hero[data-tone="alert"]`) keeps the selector inside the
* stylelint specificity ceiling; within `#deadline-plan-panel` only the hero
* section carries that tone. */
#deadline-plan-panel [data-tone="alert"]
.plan-hero__subline:not(.plan-hero__subline--muted)
+ .plan-hero__subline--muted {
color: var(--pels-text-primary);
}
/* Smart-task hero on-track status row. Hoists the trajectory's on-track
* verdict onto the hero so "am I on track?" is answerable above the fold —
* check glyph + "On track" in the success tone, then the projected-ready
* supporting phrase in primary body copy. Baseline-aligned so the glyph sits
* on the label's cap line; wraps the supporting phrase onto its own run at
* narrow widths without dropping the glyph. */
.deadline-hero-status {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-1) var(--spacing-2);
margin: var(--spacing-2) 0 0;
}
.deadline-hero-status__icon {
color: var(--pels-status-on-good);
font-size: var(--font-size-md);
/* Nudge the round glyph onto the text baseline (icons sit low otherwise). */
transform: translateY(0.12em);
}
.deadline-hero-status__label {
color: var(--pels-status-on-good);
font-weight: var(--font-weight-semibold);
}
.deadline-hero-status__supporting {
color: var(--pels-text-primary);
font-size: var(--pels-text-supporting-font-size);
line-height: var(--pels-text-supporting-font-line-height);
}
/* Smart-task hero stat pairs (Needs / Est. cost). Replaces the old grey
* `Needs … · N hours left · Auto` + cost-line metadata wall with compact
* label-over-value pairs so the payoff numbers are the loud element, not a
* muted sentence. ``/`- ` default margins are reset — the flex column
* owns the spacing. */
.deadline-hero-stats {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-2) var(--spacing-4);
margin: var(--spacing-2) 0 0;
}
.deadline-hero-stats__pair {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-width: 0;
}
.deadline-hero-stats__label {
color: var(--pels-text-supporting-color);
font-size: var(--pels-text-supporting-font-size);
line-height: var(--font-line-height-tight);
}
.deadline-hero-stats__value {
margin: 0;
color: var(--text);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--font-line-height-tight);
}
/* The task action row sits directly beneath the hero: Edit task as the filled
* action, the destructive Clear pushed to the far edge so it can't be
* fat-fingered from it (it wraps below on 320 px where the row breaks). The
* edit form below it holds only Save and Discard. */
.smart-task-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.smart-task-actions > md-text-button {
margin-left: auto;
}
/* Homey's host stylesheet resets every element's padding, which collapses the
* label onto the pill's edges; restore the M3 lead/trail space (same idiom as
* `.homes-settings md-filled-button`) and never shrink it beside Clear. */
.smart-task-actions > md-filled-tonal-button {
flex: none;
padding-inline: var(--spacing-6);
}
.smart-task-edit {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}
/* Native time input, bound to the SAME container tokens the MD filled text
* field beside it resolves to (`--color-surface-4` container, `--radius-md`
* corner — see the `--md-filled-text-field-*` bindings at :root) so the two
* fields in this one form speak one field language. `appearance: none` +
* explicit disabled state keep UA chrome out; `color-scheme` follows the
* app's dark scheme so the picker glyph / spinners stay visible on the dark
* production theme. */
.smart-task-edit__time-input {
/* The MD field defines this on its own element, so a native input next to it
* inherits nothing; set the same token here (and the light-canvas override
* with the MD fields below). */
--md-filled-text-field-container-color: var(--color-surface-4);
min-height: var(--pels-touch-target-min);
padding: var(--spacing-2) var(--spacing-3);
appearance: none;
-webkit-appearance: none;
background: var(--md-filled-text-field-container-color);
color: var(--text);
color-scheme: dark;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
.smart-task-edit__time-input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.smart-task-edit__time-input:disabled {
opacity: 0.38; /* mirrors MD's disabled-content opacity */
}
/* Desktop ships the light canvas (Homey's shell invert produces dark — see
* the theme header comment); the UA time-control internals must follow it. */
@media (hover: hover) and (pointer: fine) {
.smart-task-edit__time-input {
color-scheme: light;
}
}
/* "Extra permissions" disclosure inside the open editor. Same `
` +
* `.disclosure-chevron` idiom — and the same `.plan-card__title` summary rank —
* as the revision panel further down the page, so every collapsible block here
* opens the same way and the section title outranks the rows it contains. The
* rows are the canonical `.md-switch-row` grammar and bring their own 48 px
* floor.
*
* The wrapper exists so the granted-permissions line can sit OUTSIDE the
* ``: HTML hides every child but `` when closed, and a
* collapsed disclosure that says nothing about what is granted forces a tap to
* learn anything. Same reason `.plan-revision-panel__summary-subline` is a
* sibling rather than a child. */
.smart-task-edit__permissions-block {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.smart-task-edit__permissions {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.smart-task-edit__permissions-summary {
/* Chevron stays right-anchored while the title takes the remaining width —
* matches `.plan-revision-panel__summary`. */
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--spacing-1) var(--spacing-2);
min-height: var(--pels-touch-target-min);
padding: var(--spacing-1) 0;
cursor: pointer;
list-style: none;
}
.smart-task-edit__permissions-summary::-webkit-details-marker {
display: none;
}
/* At-rest readout of what the draft currently grants, in the canonical
* budget → limit → pause order the read-only row and the rescue sheet use.
* Exists only for the CLOSED state — with the rows on screen it would restate
* their labels verbatim under them, reading as an orphan fourth label — so the
* sibling combinator retires it the moment the disclosure opens. */
.smart-task-edit__permissions-granted {
margin: 0;
color: var(--pels-text-supporting-color);
font-size: var(--font-size-sm);
}
.smart-task-edit__permissions[open] ~ .smart-task-edit__permissions-granted {
display: none;
}
.smart-task-edit__preview {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
.smart-task-edit__previewing,
.smart-task-edit__preview-when,
.smart-task-edit__preview-cost {
margin: 0;
color: var(--pels-text-supporting-color);
font-size: var(--pels-text-supporting-font-size);
}
.smart-task-edit__error {
margin: 0;
color: var(--color-state-negative-text);
font-size: var(--font-size-sm);
}
.smart-task-edit__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-2);
}
/* A preview's verdict line, coloured by `resolveSmartTaskPreviewTone`, the one
* mapping the create and edit previews share. */
:is(.smart-task-edit, .smart-task-create) .pels-text-status-line[data-tone='good'] {
color: var(--color-state-positive-text);
}
:is(.smart-task-edit, .smart-task-create) .pels-text-status-line[data-tone='warn'] {
color: var(--color-state-warning-text);
}
:is(.smart-task-edit, .smart-task-create) .pels-text-status-line[data-tone='alert'] {
color: var(--color-state-negative-text);
}
:is(.smart-task-edit, .smart-task-create) .pels-text-status-line[data-tone='info'] {
color: var(--color-state-info-text);
}
/* "When the task is done": who starts the device after the task, with a link
* to its settings. A card on the task page (the surface card's grid), a block
* in the create preview. The link keeps its own width at the start edge. */
.smart-task-after-task > :is(h2, p),
.smart-task-create__after-task > p,
.smart-task-create__preview > p {
margin: 0;
}
.smart-task-after-task > md-text-button {
justify-self: start;
}
.smart-task-create__after-task {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-1);
}
/* The rule under Power-limit control is its own sentence, not more hint text:
* a little air above it keeps it from reading as lines 6-7 of the hint. */
#device-detail-start-rule {
margin-top: var(--spacing-1);
}
.deadlines-list-create-action {
display: flex;
justify-content: flex-end;
}
.smart-task-create,
.smart-task-create__picker,
.smart-task-create__form,
.smart-task-create__preview {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}
.smart-task-create__bar,
.smart-task-create__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-2);
}
.smart-task-create__actions {
flex-direction: column;
align-items: stretch;
}
.smart-task-create__actions > md-filled-button {
width: 100%;
}
.smart-task-create__device {
width: 100%;
min-height: var(--pels-touch-target-min);
font: inherit;
text-align: left;
cursor: pointer;
}
.smart-task-create__device > span {
color: var(--pels-text-supporting-color);
}
/* The device page's Smart task box, last on the page: a title, one line, and
* a quiet text action at the start edge. */
.device-detail-smart-task {
gap: var(--spacing-2);
height: max-content;
}
.device-detail-smart-task > h3,
.device-detail-smart-task > p {
margin: 0;
}
.device-detail-smart-task > md-text-button {
justify-self: start;
}
/* Recourse action row beneath the cannot-finish meta line. The 48 px floor
* matches the touch-target token used elsewhere on PELS — see
* `feedback_design_tokens.md` plus the upstream "Lift `.pels-icon-toggle` and
* `.pels-device-card__detail-button` to 48 px" item. The action is rendered as
* a `