/* Home owns flow content only. The shell owns the one scrolling body. */
.ui-root .ui-home { position: relative; isolation: isolate; container: home / inline-size; gap: .625rem; padding: .25rem 0 1.25rem; min-width: 0; }
.ui-root .ui-home__intro { position: relative; z-index: 2; text-align: center; padding-inline-end: var(--ui-header-ornament-space, 0px); color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); }
.ui-root .ui-home__section { position: relative; gap: .5rem; padding: 10px; background: #fffefa; border-color: #e8e5d9; box-shadow: 0 .125rem .5rem rgb(74 69 38 / .04); }
.ui-root .ui-home__surface { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ui-root .ui-home__surface .ui-home__surface-image { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.145); opacity: .28; }
.ui-root .ui-home__section > :is(h2, .ui-card__body, .ui-card__footer) { position: relative; z-index: 2; }
.ui-root .ui-home__section > .ui-card__footer:empty { display: none; }
.ui-root .ui-home__section > h2 { display: flex; align-items: center; gap: .375rem; }
.ui-root .ui-home__heading-icon { width: 24px; height: 24px; }
.ui-root .ui-home__heading-leaf[data-home-placement="home.heading.trailing-leaf"] { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; align-self: center; }
.ui-root .ui-home__art { display: block; object-fit: contain; flex: 0 0 auto; max-width: 100%; pointer-events: none; user-select: none; }
.ui-root .ui-home__final-art { position: relative; display: block; flex: 0 0 auto; inline-size: 48px; block-size: 48px; overflow: hidden; pointer-events: none; user-select: none; }
.ui-root .ui-home__final-art-image { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.ui-root .ui-home__final-art[data-home-art="rescue-medallion"] { inline-size: 64px; block-size: 64px; border-radius: 50%; }
.ui-root .ui-home__status { padding-block: 12px; }
.ui-root .ui-home__status > .ui-card__body, .ui-root .ui-home__status [data-home-status] { gap: 8px; }
/* The FINAL status leaf belongs to this card's lower corner. Reserve native
 * copy space even when the environment row wraps at enlarged text sizes. */
.ui-root .ui-home__status-leaf { position: absolute; z-index: 3; inset-inline-end: 0; inset-block-end: 0; width: 32px; height: 32px; }
.ui-root .ui-home__status .ui-home__environment { padding-inline-end: 24px; }
.ui-root .ui-home__status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .5rem; }
.ui-root .ui-home__energy, .ui-root .ui-home__mood { min-width: 0; padding: 6px; border: 1px solid #eeede4; border-radius: .75rem; display: flex; justify-content: center; align-items: center; gap: .375rem; background: #fffffc; }
.ui-root .ui-home__energy { flex-direction: column; text-align: center; }
.ui-root .ui-home__energy-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: min(7rem, 100%); aspect-ratio: 1; border: .65rem solid #e7e9e0; border-radius: 50%; box-shadow: 0 0 0 2px #edf2e2, inset 0 0 0 2px #f4f7ee; }
.ui-root .ui-home__energy-gauge[data-available="true"] { border: 0; padding: .65rem; background: radial-gradient(closest-side, #fffffc calc(100% - .65rem), transparent calc(100% - .65rem)), conic-gradient(#718d53 var(--ui-home-energy), #e3edda 0); }
.ui-root .ui-home__unknown-value { font-size: 1.75rem; line-height: 2rem; color: var(--ui-heading); }
.ui-root .ui-home__mood { flex-wrap: wrap; align-content: center; text-align: start; }
.ui-root .ui-home__cloud { width: 4rem; height: 4rem; flex: 0 0 auto; max-width: 100%; color: #3e8051; }
.ui-root .ui-home__cloud > path { fill: #f5f6e4; }
.ui-root .ui-home__mood-copy { flex: 1 1 4rem; min-width: 0; }
.ui-root .ui-home__label { font-weight: 600; }
.ui-root .ui-home__caption { display: block; font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); color: var(--ui-secondary); overflow-wrap: anywhere; }
.ui-root .ui-home__environment { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .375rem .5rem; border: 1px solid #eeede4; border-radius: .75rem; background: #fffffc; }
.ui-root .ui-home__environment > .ui-stack { flex: 1 1 10rem; min-width: 0; gap: .25rem; }
.ui-root .ui-home__environment > .ui-stack > h3 { font-size: 1.125rem; line-height: 1.5rem; }
.ui-root .ui-home__daily-note { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .375rem; border: 1px solid #eeede4; border-radius: .75rem; padding: .5rem; background: #fffffc; }
.ui-root .ui-home__daily-note > .ui-block-art__content { min-width: 0; }
.ui-root .ui-home__daily-copy { display: flex; flex-direction: column; min-width: 0; gap: .25rem; }
.ui-root .ui-home__daily-note > .ui-home__bottle { position: relative; inline-size: min(144px, 100%); width: 144px; max-width: 100%; margin-inline: auto; }
.ui-root .ui-home__bottle::after { content: ''; position: absolute; width: 70%; height: 8%; bottom: 1%; left: 15%; background: radial-gradient(ellipse, rgb(83 105 56 / .16), transparent 70%); }
.ui-root .ui-home__bottle-art { position: relative; z-index: 1; width: 100%; height: auto; }
/* The whole bottle shares the card's heading/body band, with protected native
 * text tracks. A minimum keeps its canvas inside; longer copy can grow the card.
 * At enlarged text/narrow widths it returns below the copy in normal flow. */
@container home (min-width: 20rem) {
  .ui-root .ui-home__daily { min-block-size: 132px; }
  .ui-root .ui-home__daily > .ui-card__body, .ui-root .ui-home__daily-note { position: static; }
  .ui-root .ui-home__daily > h2 { padding-inline-end: 136px; }
  .ui-root .ui-home__daily-note { grid-template-columns: minmax(0, 1fr) 128px; padding-inline-end: 0; padding-block-end: .25rem; }
  .ui-root .ui-home__daily-note > .ui-home__bottle { position: absolute; inset-block-start: 2px; inset-inline-end: 10px; inline-size: 128px; width: 128px; margin: 0; }
}
.ui-root .ui-home__daily:has(.ui-home__daily-note:is([data-art-status="error"], [data-art-status="disposed"])) { min-block-size: 0; }
.ui-root .ui-home__daily:has(.ui-home__daily-note:is([data-art-status="error"], [data-art-status="disposed"])) > h2 { padding-inline-end: 0; }
.ui-root .ui-home__daily-note:is([data-art-status="error"], [data-art-status="disposed"]) { grid-template-columns: minmax(0, 1fr); padding-inline-end: .5rem; }
@media (forced-colors: active) {
  .ui-root .ui-home__daily { min-block-size: 0; }
  .ui-root .ui-home__daily > h2 { padding-inline-end: 0; }
  .ui-root .ui-home__daily-note { grid-template-columns: minmax(0, 1fr); padding-inline-end: .5rem; }
}
/* Reserve the entire 64px composition beside the heading and above body copy. */
.ui-root .ui-home__ornamented > h2 { min-block-size: 56px; padding-inline-end: 64px; }
.ui-root .ui-home__corner { overflow: visible; }
/* Company owns this one trial: material 0, complete-group artwork 1, native
 * heading/body/actions 2 within the existing isolated block. Only the artwork
 * window clips; neither the card nor native focus outlines are clipped. */
.ui-root .ui-home > [data-art-placement="home.company.edge"] > .ui-block-art__content { z-index: auto; }
.ui-root .ui-home > [data-art-placement="home.company.edge"] > .ui-block-art__visual { display: none; position: absolute; z-index: 1; inset-block-start: 0; inset-inline-end: 0; inline-size: 64px; block-size: 64px; overflow: hidden; border-start-end-radius: var(--ui-radius-outer-card); }
.ui-root .ui-home > [data-art-placement="home.company.edge"] > .ui-block-art__visual > .ui-block-art__image { position: absolute; inset-block-start: -13px; inset-inline-start: 2px; inline-size: 88px; block-size: 88px; max-inline-size: none; }
/* Native copy takes the full width at narrow or enlarged-text sizes. Only
 * reserve a corner when the container has enough room at the chosen text size. */
@media (forced-colors: none) {
  @container home (min-width: 20rem) {
    .ui-root .ui-home > [data-art-placement="home.company.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__visual:not([hidden]) { display: block; }
    .ui-root .ui-home > [data-art-placement="home.company.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__company > h2 { min-block-size: 56px; padding-inline-end: 72px; }
    .ui-root .ui-home > [data-art-placement="home.company.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__company > h2 > .ui-home__heading-leaf { align-self: center; }
  }
}
/* Each feedback card owns its original upper trailing group. Move the complete
 * square image past its visual window to compensate transparent source margins;
 * only this decoration window clips at the card edge, never the native card.
 * At enlarged text the heading starts below the group and keeps its full width. */
.ui-root .ui-home > [data-art-placement="home.outcomes.edge"] { --ui-home-edge-size: 96px; --ui-home-edge-shift: 12.5%; }
.ui-root .ui-home > [data-art-placement="home.rescue.edge"] { --ui-home-edge-size: 88px; --ui-home-edge-shift: 2.5%; }
.ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]) > .ui-block-art__content { z-index: auto; }
.ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]) > .ui-block-art__visual { display: none; position: absolute; z-index: 1; inset-block-start: 4px; inset-inline-end: 0; inline-size: var(--ui-home-edge-size); block-size: var(--ui-home-edge-size); overflow: hidden; }
.ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]) > .ui-block-art__visual > .ui-block-art__image { position: absolute; inset-block-start: 0; inset-inline-start: var(--ui-home-edge-shift); inline-size: 100%; block-size: 100%; max-inline-size: none; }
@media (forced-colors: none) {
  .ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]):is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__visual:not([hidden]) { display: block; }
  .ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]):is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__section > h2 { padding-block-start: calc(var(--ui-home-edge-size) + 4px); }
  @container home (min-width: 20rem) {
    /* The whole-image corner shares the heading/caption band. Native copy
     * keeps trailing clearance while the metric grid stays full width. */
    .ui-root .ui-home > [data-art-placement="home.outcomes.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) { --ui-home-edge-size: 64px; }
    .ui-root .ui-home > :is([data-art-placement="home.outcomes.edge"], [data-art-placement="home.rescue.edge"]):is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__section > h2 { min-block-size: 32px; padding-block-start: 0; padding-inline-end: var(--ui-home-edge-size); }
    /* Without a caption, the heading clears the grid below the corner. A
     * visible caption shares that band instead of adding an empty heading gap.
     * Below this threshold, keep the 96px art above full-width native copy. */
    .ui-root .ui-home > [data-art-placement="home.outcomes.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__outcomes > h2 { min-block-size: 52px; align-items: flex-start; }
    .ui-root .ui-home > [data-art-placement="home.outcomes.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__outcomes > h2 > .ui-home__heading-leaf { align-self: flex-start; }
    .ui-root .ui-home > [data-art-placement="home.outcomes.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) > .ui-block-art__content > .ui-home__outcomes:has([data-home-feedback-session]:not([hidden])) > h2 { min-block-size: 32px; }
    .ui-root .ui-home > [data-art-placement="home.outcomes.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) [data-home-feedback-session]:not([hidden]) { padding-inline-end: var(--ui-home-edge-size); }
    .ui-root .ui-home > [data-art-placement="home.rescue.edge"]:is([data-art-status="loading"], [data-art-status="loaded"]) .ui-home__rescue-intro { padding-inline-end: var(--ui-home-edge-size); }
  }
}
.ui-root .ui-home__illustrated { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ui-root .ui-home__illustrated > p { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.ui-root .ui-home__company-copy { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 8px; border: 1px solid #eeede4; border-radius: .875rem; background: #fffffc; }
.ui-root .ui-home__company-mark { inline-size: 56px; block-size: 56px; border-radius: 50%; }
.ui-root .ui-home__company-bubble { position: relative; margin: 0; padding: 10px 12px; border: 1px solid #eeede4; border-radius: .875rem; background: #fffffc; box-shadow: 0 2px 4px rgb(74 69 38 / .04); }
.ui-root .ui-home__company-bubble::before { content: ''; position: absolute; inset-inline-start: -6px; inset-block-start: 50%; inline-size: 10px; block-size: 10px; background: #fffffc; border-inline-start: 1px solid #eeede4; border-block-end: 1px solid #eeede4; transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.ui-root .ui-home__company > .ui-card__footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.ui-root .ui-home__company > .ui-card__footer > .ui-button { align-self: stretch; padding-inline: .625rem; }
.ui-root .ui-home__daily-actions { display: grid; gap: .5rem; width: 100%; min-width: 0; }
.ui-root .ui-home__selected-task { margin: 0; overflow-wrap: anywhere; }
/* Successful changes remain in the polite live region without repeating the
 * saved row's state in the visual layout. Errors and recovery stay in flow. */
.ui-root .ui-home__success-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-root .ui-home__company-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6em), 1fr)); gap: .25em; min-width: 0; }
.ui-root .ui-home__company-actions > .ui-button { padding: .5em .25em; gap: .25em; border-radius: .75em; }
.ui-root .ui-home__company-glyph { display: block; inline-size: 1.125em; block-size: 1.125em; flex: 0 0 1.125em; pointer-events: none; }
.ui-root .ui-home__proposal { min-width: 0; }
.ui-root .ui-home__proposal-content { flex: 1 1 0; min-width: 0; }
.ui-root .ui-home__proposal-description { white-space: pre-wrap; user-select: text; overflow-wrap: anywhere; }
.ui-root .ui-home__proposal [hidden] { display: none; }
.ui-root .ui-home__rescue > .ui-card__body { gap: 12px; }
.ui-root .ui-home__rescue-intro { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-block: 4px; }
.ui-root .ui-home__rescue-intro:has(> .ui-home__rescue-mark[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ui-root .ui-home__rescue-option { gap: 12px; padding: 10px; border: 1px solid #e8ebdd; border-radius: .875rem; background: #f5f7ed; }
.ui-root .ui-home__tasks { display: flex; flex-direction: column; gap: .25rem; padding: 0; margin: 0; list-style: none; }
.ui-root .ui-home__task { position: relative; display: flex; flex-wrap: wrap; gap: 0; align-items: center; border-bottom: 1px solid #eeede4; padding-block: .25rem; }
.ui-root .ui-home__task:last-child { border-bottom: 0; }
.ui-root .ui-home__task-label { display: flex; align-items: flex-start; flex: 1 1 12rem; gap: .5rem; min-width: 0; min-height: var(--ui-action-min); cursor: pointer; }
.ui-root .ui-home__task > .ui-home__task-label { padding-inline-end: 5.5rem; }
.ui-root .ui-home__task-icon { width: 28px; height: 28px; margin-block-start: .5rem; }
.ui-root .ui-home__checkbox { appearance: none; width: 1.25rem; height: 1.25rem; margin: .875rem .375rem .875rem .125rem; flex: 0 0 auto; border: 2px solid #2b6d5d; border-radius: .25rem; background-color: #fffef8; background-repeat: no-repeat; background-position: center; background-size: .75rem; accent-color: var(--ui-primary); cursor: pointer; }
.ui-root .ui-home__checkbox:checked { border-color: var(--ui-primary); background-color: var(--ui-primary); background-image: url("../../assets/ui/controls/home-checkbox-check.svg"); }
.ui-root .ui-home__checkbox:disabled { cursor: default; border-color: var(--ui-disabled-text); background-color: var(--ui-disabled-fill); }
.ui-root .ui-home__checkbox:checked:disabled { background-color: var(--ui-disabled-text); }
.ui-root .ui-home__task-copy { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding-block: .625rem; overflow-wrap: anywhere; }
.ui-root .ui-home__task[data-completed="true"] .ui-home__task-title { color: var(--ui-secondary); text-decoration: line-through; }
.ui-root .ui-home__task > .ui-button { padding-inline: .75rem; }
.ui-root .ui-task-description { flex: 1 1 100%; min-width: 0; border: 1px solid #e8ebdd; border-radius: .625rem; background: #f8f9f1; }
.ui-root .ui-task-description > summary { box-sizing: border-box; min-height: 44px; padding: 8px 12px; color: var(--ui-heading); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.ui-root .ui-task-description > summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: inherit; }
.ui-root .ui-task-description__text { padding: 0 12px 12px; margin: 0; white-space: pre-wrap; user-select: text; }
.ui-root .ui-home__task > .ui-task-description { border: 0; background: transparent; }
.ui-root .ui-home__task > .ui-task-description > summary { position: absolute; top: .25rem; inset-inline-end: 0; width: 5rem; padding: 8px 4px; border-radius: .625rem; background: #f0f4e8; }
.ui-root .ui-home__task > .ui-task-description[open] { padding-block-start: .375rem; }
.ui-root .ui-home__task-actions { padding: 0 8px 8px; }
.ui-root .ui-home__task-actions > .ui-button { padding-inline: .75rem; }
.ui-root .ui-home__empty { padding: .75rem .5rem; color: var(--ui-secondary); background: #f2f4e8; border-radius: .875rem; }
.ui-root .ui-home__main-action { width: 100%; padding-inline: 16px; }
/* Include the .125rem focus outline and its .125rem offset in native scrolling. */
.ui-root .ui-home .ui-button { scroll-margin-block: var(--ui-space-1); }
.ui-root .ui-home .ui-button__label { text-wrap: balance; }
.ui-root .ui-home__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .5rem; }
/* The four headline results form two pairs, independently of source details. */
.ui-root .ui-home__result-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-root .ui-home__result { display: flex; align-items: center; min-width: 0; gap: .375rem; padding: .5rem .375rem; border: 1px solid #eeede4; border-radius: .75rem; background: #fffffc; }
.ui-root .ui-home__result > div { min-width: 0; }
.ui-root .ui-home__result-value { display: block; font-size: var(--ui-body-size); line-height: var(--ui-body-line); overflow-wrap: anywhere; }
.ui-root .ui-home__breakdown > summary { min-height: 44px; padding: 10px 4px; color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); cursor: pointer; }
.ui-root .ui-home__breakdown > summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: .5rem; }
.ui-root .ui-home__breakdown > section { margin-block-start: .75rem; }
@container home (max-width: 18rem) {
  .ui-root .ui-home__rescue-option { flex-direction: column; align-items: stretch; }
  .ui-root .ui-home__rescue-option > .ui-home__art { align-self: center; }
  .ui-root .ui-home__company-copy, .ui-root .ui-home__rescue-intro { grid-template-columns: minmax(0, 1fr); }
  .ui-root .ui-home__company-bubble::before { inset-inline-start: 22px; inset-block-start: -6px; transform: rotate(135deg); }
  .ui-root .ui-home__result-summary { grid-template-columns: minmax(0, 1fr); }
  .ui-root .ui-home__task > .ui-home__task-label { padding-inline-end: 0; }
  .ui-root .ui-home__task > .ui-task-description > summary { position: static; width: auto; padding: 8px 12px; }
}
/* Picker spacing is independent of horizontal task-row flex allocation. Keep
 * the selected text scale; decorative gutters must not consume its reading area. */
.ui-root .ui-home-offers { width: min(35rem, calc(100% - 24px)); }
.ui-root .ui-home-offers :is(.ui-dialog__header, .ui-dialog__body, .ui-dialog__actions) { padding-inline: 12px; }
.ui-root .ui-home-offers .ui-dialog__header { padding-block: 12px; gap: 8px; }
.ui-root .ui-home-offers .ui-dialog__title { min-width: 0; text-wrap: balance; }
.ui-root .ui-home-offers .ui-dialog__body { padding-bottom: 12px; gap: 12px; }
.ui-root .ui-home-offers .ui-dialog__actions { padding-block: 12px; gap: 8px; }
.ui-root .ui-home-offers .ui-button { min-height: 44px; padding: 6px 12px; }
.ui-root .ui-home-offers__choices { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ui-root .ui-home-offers__choices > .ui-home__task-label { flex: none; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-field); }
.ui-root .ui-home-offers__choices input[type="radio"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--ui-primary); }
.ui-root .ui-home-offers__choices .ui-home__task-copy { flex: 1; padding-block: 0; }
@media (max-width: 359px) {
  .ui-root .ui-home-offers .ui-dialog__header { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ui-root .ui-home-offers .ui-dialog__header > .ui-button { justify-self: end; }
  .ui-root .ui-home__intro { padding-inline: 0; }
  .ui-root .ui-home__canopy-frame { display: none; }
  .ui-root .ui-home__result { flex-direction: column; align-items: flex-start; }
  .ui-root .ui-home__illustrated { flex-wrap: wrap; }
  .ui-root .ui-home__illustrated > p { flex-basis: 9rem; }
  .ui-root .ui-home__bottle { margin-block: 0; margin-inline: auto; }
}
@media (forced-colors: active) {
  .ui-root .ui-home__cloud { color: CanvasText; }
  .ui-root .ui-home__cloud > path { fill: Canvas; }
  .ui-root .ui-home__checkbox,
  .ui-root .ui-home__checkbox:checked,
  .ui-root .ui-home__checkbox:disabled,
  .ui-root .ui-home__checkbox:checked:disabled { appearance: auto; border: revert; border-radius: revert; background: revert; accent-color: auto; forced-color-adjust: auto; }
  .ui-root .ui-home__checkbox:focus-visible { outline-color: Highlight; }
  .ui-root .ui-home__ornamented > h2 { min-block-size: 0; padding-inline-end: 0; }
  .ui-root .ui-home__company-mark { display: none; }
  .ui-root .ui-home__final-art[data-home-art="rescue-medallion"] { display: none; }
  .ui-root .ui-home__company-copy, .ui-root .ui-home__rescue-intro { grid-template-columns: minmax(0, 1fr); }
  .ui-root .ui-home__company-copy, .ui-root .ui-home__company-bubble, .ui-root .ui-home__rescue-option { background: Canvas; border-color: CanvasText; }
  .ui-root .ui-home__company-bubble::before { display: none; }
  .ui-root .ui-task-description { background: Canvas; border-color: CanvasText; }
  .ui-root .ui-task-description > summary:focus-visible { outline-color: Highlight; }
  .ui-root .ui-home__section, .ui-root .ui-home__energy, .ui-root .ui-home__mood, .ui-root .ui-home__environment, .ui-root .ui-home__result { background: Canvas; border-color: CanvasText; }
  .ui-root .ui-home__surface, .ui-root .ui-home__canopy, .ui-root .ui-home__corner, .ui-root .ui-home__bottle::after { display: none; }
  .ui-root .ui-home__energy-gauge, .ui-root .ui-home__energy-gauge[data-available="true"] { border: 2px solid GrayText; background: Canvas; box-shadow: none; }
}

/* 健康与状态（示例数据时带“示例”标记） */
.ui-root .ui-health { display: grid; gap: 10px; }
.ui-root .ui-health__sample { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 12px; background: #f4f1e3;
  color: var(--ui-secondary); font-size: var(--ui-secondary-size); line-height: var(--ui-secondary-line); }
.ui-root .ui-health__badge { flex: none; padding: 1px 8px; border-radius: 999px; background: #e8dfc2; color: #6b5420; font-size: .75rem; line-height: 1.6; }
.ui-root .ui-health__sample { flex-wrap: wrap; }
.ui-root .ui-health__badge--live { background: #dbe8d2; color: #2f5233; }
.ui-root .ui-health__connect { flex: 1 0 100%; min-height: 40px; }
.ui-root .ui-health__tag { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #f1ead2; color: #6b5420; font-size: .6875rem; font-style: normal; }
.ui-root .ui-health__heading { margin: 6px 0 0; font-size: var(--ui-secondary-size); color: var(--ui-heading); }
.ui-root .ui-health__panel, .ui-root .ui-health__metric { display: grid; gap: 6px; padding: 10px; border: 1px solid #ece8da; border-radius: 12px; background: #fffdf6; min-width: 0; }
.ui-root .ui-health__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ui-root .ui-health__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ui-root .ui-health__label { font-size: .8125rem; color: var(--ui-secondary); }
.ui-root .ui-health__value { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ui-heading); line-height: 1.3; overflow-wrap: anywhere; }
.ui-root .ui-health__value small { font-size: .75rem; font-weight: 500; color: var(--ui-secondary); }
.ui-root .ui-health__big { font-size: 1.25rem; color: var(--ui-heading); }
.ui-root .ui-health__small { font-size: .8125rem; color: var(--ui-heading); }
.ui-root .ui-health__hint { font-size: .75rem; color: var(--ui-secondary); }
.ui-root .ui-health__bars { width: 100%; height: 24px; }
.ui-root .ui-health__bars rect { fill: #c9d6bf; }
.ui-root .ui-health__bars rect.is-last { fill: var(--ui-primary); }
.ui-root .ui-health__area { width: 100%; height: 64px; }
.ui-root .ui-health__area-fill { fill: rgb(47 82 51 / .12); }
.ui-root .ui-health__area-line { fill: none; stroke: var(--ui-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ui-root .ui-health__pulse { width: 100%; height: 48px; }
.ui-root .ui-health__pulse-line { fill: none; stroke: #c0564b; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-root .ui-health__metric--center { justify-items: center; }
.ui-root .ui-health__metric--center .ui-health__row { width: 100%; }
.ui-root .ui-health__gauge { width: 120px; height: 66px; }
.ui-root .ui-health__gauge path { fill: none; stroke-width: 10; stroke-linecap: round; }
.ui-root .ui-health__gauge-track { stroke: #ece8da; }
.ui-root .ui-health__gauge-value { stroke: var(--ui-primary); }
.ui-root .ui-health__rings { width: 80px; height: 80px; }
.ui-root .ui-health__rings circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ui-root .ui-health__ring-track { stroke: #ece8da; }
.ui-root .ui-health__ring, .ui-root .ui-health__dot { stroke: var(--ui-primary); background: var(--ui-primary); }
.ui-root .ui-health__ring--1, .ui-root .ui-health__dot--1 { opacity: .74; }
.ui-root .ui-health__ring--2, .ui-root .ui-health__dot--2 { opacity: .48; }
.ui-root .ui-health__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: .75rem; color: var(--ui-secondary); }
.ui-root .ui-health__legend span { display: inline-flex; align-items: center; gap: 4px; }
.ui-root .ui-health__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
@media (forced-colors: active) { .ui-root .ui-health__bars rect, .ui-root .ui-health__area-line, .ui-root .ui-health__gauge-value, .ui-root .ui-health__ring { fill: CanvasText; stroke: CanvasText; } }

/* 小火花卡片与完成记录里的小火花 */
.ui-root .ui-streaks { display: grid; gap: 12px; }
.ui-root .ui-streaks__solo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: #fffdf4; border: 1px solid #ece3cc; }
.ui-root .ui-streaks__solo.is-lit { filter: none; border-color: #f0cf8c; background: linear-gradient(#fff9e8, #fffdf4); }
.ui-root .ui-streaks__avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.ui-root .ui-streaks__solo-text { display: grid; gap: 2px; min-width: 0; }
.ui-root .ui-streaks__solo-text strong { color: var(--ui-heading); }
.ui-root .ui-streaks__days { font-size: 1.125rem; font-weight: 700; color: #b8661e; }
.ui-root .ui-streaks__solo-text small, .ui-root .ui-streaks__together { color: var(--ui-secondary); font-size: .8125rem; }
.ui-root .ui-streaks__pair { display: grid; justify-items: center; gap: 8px; padding: 14px 12px; border-radius: 18px; background: linear-gradient(#fff8e6, #fffdf4); border: 1px solid #efdcae; text-align: center; }
.ui-root .ui-streaks__pair-head { display: flex; align-items: center; gap: 8px; color: var(--ui-heading); }
.ui-root .ui-streaks__sample { padding: 1px 8px; border-radius: 999px; background: #efe4c6; color: #7a5a1e; font-size: .6875rem; font-weight: 700; }
.ui-root .ui-streaks__duo { display: flex; align-items: center; gap: 10px; }
.ui-root .ui-streaks__duo img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #fffdf4; box-shadow: 0 2px 8px #0002; }
.ui-root .ui-streaks__duo--small img { width: 40px; height: 40px; }
.ui-root .ui-streaks__flame { font-size: 1.5rem; }
.ui-root .ui-streaks__status { display: flex; gap: 16px; font-size: .8125rem; color: var(--ui-secondary); }
.ui-root .ui-streaks__status .is-lit { color: var(--ui-heading); font-weight: 700; }
.ui-root .ui-streaks__cheer { min-width: 10rem; }
.ui-root .ui-streaks__spark { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(#fff8e6, #fffdf4); border: 1px solid #efdcae; }
.ui-root .ui-streaks__spark[hidden] { display: none; }
.ui-root .ui-streaks__spark-text { display: grid; gap: 2px; }
.ui-root .ui-streaks__spark-text strong { color: var(--ui-heading); }
.ui-root .ui-streaks__spark-text small { color: #b8661e; font-weight: 700; }