/* Home-only dashboard styles. The existing execution stylesheet remains unchanged. */
#main.is-home {
  width: min(100%, 1120px);
  max-width: 1120px;
  padding-top: 30px;
}

.dashboard {
  --metric-columns: repeat(4, minmax(0, 1fr));
  --daily-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
  --metric-padding: 22px;
  --metric-number: 42px;
  --ring-size: 148px;
  --module-padding: 22px;
  --home-title: 30px;
  --card-gap: 16px;
  width: 100%;
  min-width: 0;
  color: #1d1d1f;
}
.dashboard button, .theme-option, .preview-option, #back-home { min-height: 44px; }
.dashboard button:focus-visible, .theme-option:focus-visible, .preview-option:focus-visible, #back-home:focus-visible {
  outline: 3px solid rgba(0, 113, 227, .26);
  outline-offset: 3px;
}
.dashboard button:active:not(:disabled), .theme-option:active:not(:disabled), .preview-option:active:not(:disabled) { filter: brightness(.97); }
.dashboard p, .dashboard h1, .dashboard h2, .dashboard strong { overflow-wrap: anywhere; }
.home-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 25px; }
.home-heading > div { min-width: 0; }
.home-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; color: #6e6e73; font-size: 12px; line-height: 1.5; }
.home-heading h1 { margin: 0; color: #1d1d1f; font-size: var(--home-title); font-weight: 650; letter-spacing: -.035em; line-height: 1.35; }
.home-subtitle { margin-top: 9px; color: #6e6e73; font-size: 14px; line-height: 1.7; }
.home-date { padding-top: 3px; color: #6e6e73; font-size: 12px; line-height: 1.7; text-align: right; }
.demo-badge { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #dedee4; border-radius: 7px; color: #6e6e73; background: #f8f8fa; font-size: 12px; font-weight: 400; line-height: 1.5; }
.dashboard .section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 15px; }
.dashboard .section-heading h2 { margin: 0; color: #1d1d1f; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.45; }
.section-note { color: #6e6e73; font-size: 12px; line-height: 1.6; }

/* Theme 1: numbers lead, with a quiet, linear progress indicator. */
.metric-grid { display: grid; grid-template-columns: var(--metric-columns); gap: var(--card-gap); }
.metric-card { min-width: 0; padding: var(--metric-padding); border: 1px solid rgba(0, 0, 0, .055); border-radius: 20px; background: #fff; box-shadow: 0 5px 22px rgba(0, 0, 0, .025); }
.metric-label { margin: 0 0 17px; color: #6e6e73; font-size: 13px; font-weight: 500; line-height: 1.55; }
.metric-dial { position: relative; min-width: 0; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 5px 8px; }
.metric-ring { display: none; }
.metric-value { min-width: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px; color: #1d1d1f; }
.metric-value strong { font-size: var(--metric-number); font-weight: 650; letter-spacing: -.055em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-value .unit, .metric-value > span:not(.metric-percent) { color: #6e6e73; font-size: 13px; line-height: 1.4; }
.metric-percent { color: #6e6e73; font-size: 12px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; }
.metric-target { margin: 10px 0 0; color: #6e6e73; font-size: 12px; line-height: 1.6; }
.metric-track { height: 4px; margin-top: 17px; overflow: hidden; border-radius: 6px; background: #ebebef; }
.metric-track > span { display: block; width: 0; max-width: 100%; height: 100%; border-radius: inherit; background: #0071e3; transition: width .24s ease; }
.metric-gap { margin: 10px 0 0; color: #55555a; font-size: 12px; line-height: 1.65; }
.metric-gap strong { color: #1d1d1f; font-weight: 600; }
.monthly-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin: 14px 2px 0; color: #6e6e73; font-size: 13px; line-height: 1.7; }
.monthly-line strong { color: #1d1d1f; font-weight: 500; }

/* Theme 2: an actual circular dial, with centered values on a dark panel. */
.theme-ring .metric-card { padding-top: 19px; background: #1d1d1f; border-color: #29292c; box-shadow: none; }
.theme-ring .metric-label { color: #c4c4cb; margin-bottom: 7px; text-align: center; }
.theme-ring .metric-dial { display: grid; place-items: center; width: 100%; min-height: var(--ring-size); margin: 5px auto 0; }
.theme-ring .metric-ring { display: block; width: var(--ring-size); height: var(--ring-size); max-width: 100%; overflow: visible; transform: rotate(-90deg); }
.theme-ring .metric-ring circle { fill: none; stroke-width: 6; }
.theme-ring .metric-ring circle:first-child { stroke: rgba(255, 255, 255, .12); }
.theme-ring .metric-ring circle:last-child { stroke: #53a6ff; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.theme-ring .metric-value { position: absolute; top: 46%; left: 50%; width: 90%; transform: translate(-50%, -50%); justify-content: center; flex-wrap: nowrap; gap: 3px; color: white; }
.theme-ring .metric-value strong { color: #fff; font-size: calc(var(--metric-number) - 4px); letter-spacing: -.05em; }
.theme-ring .metric-value .unit, .theme-ring .metric-value > span:not(.metric-percent) { color: #c4c4cb; font-size: 12px; }
.theme-ring .metric-percent { position: absolute; top: 66%; left: 50%; transform: translateX(-50%); color: #a9c7e8; white-space: nowrap; font-size: 12px; }
.theme-ring .metric-target { margin-top: 9px; color: #b7b7bf; text-align: center; }
.theme-ring .metric-track { display: none; }
.theme-ring .metric-gap { margin-top: 8px; color: #c4c4cb; text-align: center; }
.theme-ring .metric-gap strong { color: #fff; }

/* Theme 3: a horizontal instrument — target first, large value, then a wide bar. */
.theme-bars .metric-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label target" "value value" "track track" "gap gap" "note note"; align-content: start; background: #edf5ff; border-color: #dceafb; box-shadow: none; }
.theme-bars .metric-label { grid-area: label; margin: 0 8px 15px 0; color: #41607e; }
.theme-bars .metric-target { grid-area: target; margin: 0 0 15px; color: #536f8b; text-align: right; }
.theme-bars .metric-dial { grid-area: value; align-items: baseline; margin-top: 1px; }
.theme-bars .metric-value strong { color: #09396b; font-size: calc(var(--metric-number) - 2px); }
.theme-bars .metric-value .unit, .theme-bars .metric-value > span:not(.metric-percent) { color: #536f8b; }
.theme-bars .metric-percent { color: #245b91; font-size: 13px; }
.theme-bars .metric-track { grid-area: track; height: 19px; margin-top: 20px; border-radius: 5px; background: repeating-linear-gradient(90deg, rgba(0, 77, 153, .09) 0, rgba(0, 77, 153, .09) 1px, transparent 1px, transparent 25%), #dceafa; }
.theme-bars .metric-track > span { border-radius: 4px; background: linear-gradient(90deg, #83b9f2, #0071e3); }
.theme-bars .metric-gap { grid-area: gap; margin-top: 12px; color: #41607e; }
.theme-bars .metric-gap strong { color: #09396b; }

/* Four visible capability cards, plus an actionable prompt — no hidden module tabs. */
.daily-layout { display: grid; grid-template-columns: var(--daily-columns); align-items: start; gap: 24px; margin-top: 29px; }
.daily-layout > * { min-width: 0; }
.home-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.module-tile { position: relative; min-width: 0; min-height: 192px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--module-padding); border: 1px solid #e5e5ea; border-radius: 19px; background: #fff; color: #1d1d1f; text-align: left; transition: border-color .16s, background-color .16s, box-shadow .16s; }
.module-tile:hover { border-color: #b8cde3; background: #fcfdff; box-shadow: 0 5px 20px rgba(0, 70, 140, .045); }
.module-tile.is-recommended { border-color: #b5d6f7; background: #fbfdff; }
.module-icon { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; margin-bottom: 16px; border-radius: 11px; background: #f1f1f4; color: #55555a; }
.module-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-recommended .module-icon { background: #e8f2fd; color: #0071e3; }
.module-name { display: block; margin: 0; color: #1d1d1f; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
.module-description { display: block; margin-top: 6px; color: #6e6e73; font-size: 13px; font-weight: 400; line-height: 1.7; }
.module-next { display: block; margin-top: auto; padding-top: 17px; color: #0071e3; font-size: 13px; font-weight: 500; line-height: 1.5; }
.module-tag { position: absolute; top: 19px; right: 17px; max-width: calc(100% - 82px); padding: 3px 7px; border-radius: 7px; background: #edf5ff; color: #0065cc; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; }
.module-tag:empty { display: none; }
.action-guide { padding: 24px; border: 1px solid #e3e3e8; border-radius: 20px; background: #fff; }
.guide-kicker { margin: 0 0 9px; color: #6e6e73; font-size: 12px; line-height: 1.5; }
.action-guide h2 { margin: 0; color: #1d1d1f; font-size: 21px; font-weight: 600; letter-spacing: -.025em; line-height: 1.45; }
.guide-copy { margin: 11px 0 0; color: #6e6e73; font-size: 14px; line-height: 1.8; }
.guide-steps { display: grid; gap: 17px; margin: 23px 0; padding: 0; list-style: none; }
.guide-steps li { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.guide-step-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #f0f0f3; color: #55555a; font-size: 12px; line-height: 1; }
.guide-steps strong { grid-column: 2; color: #1d1d1f; font-size: 14px; font-weight: 500; line-height: 1.7; }
.guide-steps p { grid-column: 2; margin-top: 3px; color: #6e6e73; font-size: 12px; line-height: 1.7; }
.dashboard #begin-recommended { width: 100%; min-height: 48px; font-size: 14px; }
.guide-boundary { margin-top: 12px; color: #6e6e73; font-size: 12px; line-height: 1.7; }
.home-footnote { margin: 21px 2px 0; color: #6e6e73; font-size: 12px; line-height: 1.8; }

/* Settings share the existing native dialog but use their own scoped choices. */
.settings-section { min-width: 0; margin-top: 22px; }
.settings-section + .settings-section { margin-top: 24px; padding-top: 21px; border-top: 1px solid #e5e5ea; }
.settings-section > h3, .settings-section > label { display: block; margin: 0 0 11px; color: #1d1d1f; font-size: 14px; font-weight: 600; line-height: 1.6; }
.settings-section > p { margin: 9px 0 0; color: #6e6e73; font-size: 12px; line-height: 1.7; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-option { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 11px; border: 1px solid #dedee4; border-radius: 13px; background: white; color: #1d1d1f; text-align: left; }
.theme-option:hover { background: #fafbfe; border-color: #b6c9df; }
.theme-option.selected, .theme-option[aria-pressed="true"] { border-color: #0071e3; box-shadow: 0 0 0 1px #0071e3; background: #fbfdff; }
.theme-option > strong { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; line-height: 1.6; }
.theme-option > small { display: block; margin-top: 2px; color: #6e6e73; font-size: 12px; line-height: 1.6; }
.theme-preview { width: 100%; height: 57px; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; border-radius: 8px; background: #f0f0f3; }
.theme-preview i { display: block; width: 19px; height: 24px; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.theme-preview i:nth-child(2) { height: 34px; }
.theme-preview i:nth-child(3) { height: 19px; }
.theme-option[data-theme="ring"] .theme-preview, .theme-option[data-theme="theme-ring"] .theme-preview { background: #1d1d1f; }
.theme-option[data-theme="ring"] .theme-preview i, .theme-option[data-theme="theme-ring"] .theme-preview i { width: 22px; height: 22px; border: 3px solid #53a6ff; border-left-color: #4c4c52; border-radius: 50%; background: transparent; box-shadow: none; }
.theme-option[data-theme="bars"] .theme-preview, .theme-option[data-theme="theme-bars"] .theme-preview { align-items: flex-end; padding-bottom: 12px; background: #e5f0fc; }
.theme-option[data-theme="bars"] .theme-preview i, .theme-option[data-theme="theme-bars"] .theme-preview i { width: 17px; border-radius: 3px 3px 1px 1px; background: #64a9ed; }
.preview-options, #data-mode-options { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.preview-option { flex: 1 1 110px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: 1px solid #dedee4; border-radius: 10px; background: white; color: #55555a; font-size: 13px; line-height: 1.6; }
.preview-option:hover { background: #f7f9fc; border-color: #b6c9df; }
.preview-option.selected, .preview-option[aria-pressed="true"] { background: #edf5ff; border-color: #86baf0; color: #0065cc; }
.settings-status { margin-top: 17px; padding: 10px 12px; border-radius: 10px; background: #f5f5f7; color: #6e6e73; font-size: 12px; line-height: 1.7; }
.settings-status:empty { display: none; }

/* The pre-existing execution flow keeps its original sizing and appearance. */
#execution-view.hidden { display: none; }
.execution-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; color: #6e6e73; font-size: 13px; line-height: 1.6; }
.execution-topbar #back-home { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; background: transparent; color: #0071e3; font-size: 13px; line-height: 1.6; }
.execution-topbar #back-home:hover { color: #005bb5; }
.execution-topbar .breadcrumb { color: #6e6e73; font-size: 12px; }

/* The phone preview uses the same layout rules as a real narrow viewport. */
.dashboard.preview-phone {
  --metric-columns: repeat(2, minmax(0, 1fr));
  --daily-columns: minmax(0, 1fr);
  --metric-padding: 16px;
  --metric-number: 34px;
  --ring-size: 128px;
  --module-padding: 17px;
  --home-title: 26px;
  --card-gap: 12px;
  max-width: 430px;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}
.preview-phone .home-heading { display: block; margin-bottom: 21px; }
.preview-phone .home-date { margin-top: 11px; padding-top: 0; text-align: left; }
.preview-phone .metric-card { border-radius: 17px; }
.preview-phone.theme-bars .metric-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "target" "value" "track" "gap" "note"; }
.preview-phone.theme-bars .metric-label { margin-bottom: 3px; }
.preview-phone.theme-bars .metric-target { margin-bottom: 10px; text-align: left; }
.preview-phone.theme-bars .metric-track { height: 17px; margin-top: 15px; }
.preview-phone .daily-layout { gap: 22px; margin-top: 25px; }
.preview-phone .home-module-grid { gap: 12px; }
.preview-phone .module-tile { min-height: 168px; border-radius: 17px; }
.preview-phone .module-icon { width: 34px; height: 34px; margin-bottom: 11px; border-radius: 10px; }
.preview-phone .module-name { font-size: 16px; }
.preview-phone .module-description { font-size: 12px; }
.preview-phone .module-next { padding-top: 12px; font-size: 12px; }
.preview-phone .module-tag { top: 15px; right: 12px; max-width: calc(100% - 69px); padding: 2px 5px; font-size: 12px; }
.preview-phone .action-guide { padding: 21px; border-radius: 18px; }
.preview-phone .action-guide h2 { font-size: 20px; }
.preview-phone .guide-copy { font-size: 14px; }

@media (max-width: 900px) and (min-width: 601px) {
  .dashboard { --metric-padding: 18px; --metric-number: 35px; --ring-size: 125px; --card-gap: 12px; --daily-columns: minmax(0, 1fr) minmax(250px, .85fr); --module-padding: 17px; }
  .metric-label { font-size: 12px; }
  .theme-bars .metric-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "target" "value" "track" "gap" "note"; }
  .theme-bars .metric-label { margin-bottom: 3px; }
  .theme-bars .metric-target { margin-bottom: 10px; text-align: left; }
  .daily-layout { gap: 18px; }
  .module-tile { min-height: 180px; }
  .module-name { font-size: 16px; }
  .module-description { font-size: 12px; }
  .module-tag { top: 15px; right: 12px; max-width: calc(100% - 72px); padding: 2px 5px; }
  .action-guide { padding: 20px; }
  .action-guide h2 { font-size: 20px; }
}

@media (max-width: 600px) {
  #main.is-home { padding-top: 24px; }
  .dashboard {
    --metric-columns: repeat(2, minmax(0, 1fr));
    --daily-columns: minmax(0, 1fr);
    --metric-padding: 16px;
    --metric-number: 34px;
    --ring-size: 128px;
    --module-padding: 17px;
    --home-title: 26px;
    --card-gap: 12px;
  }
  .home-heading { display: block; margin-bottom: 21px; }
  .home-date { margin-top: 11px; padding-top: 0; text-align: left; }
  .metric-card { border-radius: 17px; }
  .theme-bars .metric-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "target" "value" "track" "gap" "note"; }
  .theme-bars .metric-label { margin-bottom: 3px; }
  .theme-bars .metric-target { margin-bottom: 10px; text-align: left; }
  .theme-bars .metric-track { height: 17px; margin-top: 15px; }
  .daily-layout { gap: 22px; margin-top: 25px; }
  .home-module-grid { gap: 12px; }
  .module-tile { min-height: 168px; border-radius: 17px; }
  .module-icon { width: 34px; height: 34px; margin-bottom: 11px; border-radius: 10px; }
  .module-name { font-size: 16px; }
  .module-description { font-size: 12px; }
  .module-next { padding-top: 12px; font-size: 12px; }
  .module-tag { top: 15px; right: 12px; max-width: calc(100% - 69px); padding: 2px 5px; font-size: 12px; }
  .action-guide { padding: 21px; border-radius: 18px; }
  .action-guide h2 { font-size: 20px; }
  .guide-copy { font-size: 14px; }
  .theme-options { grid-template-columns: minmax(0, 1fr); }
  .theme-option { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 13px; align-items: center; padding: 10px; }
  .theme-preview { grid-column: 1; grid-row: 1 / 3; height: 60px; }
  .theme-option > strong { grid-column: 2; align-self: end; margin-top: 0; font-size: 14px; }
  .theme-option > small { grid-column: 2; align-self: start; margin-top: 2px; }
}

@media (max-width: 359px) {
  .dashboard, .dashboard.preview-phone { --metric-padding: 13px; --metric-number: 30px; --ring-size: 114px; --module-padding: 14px; --home-title: 24px; --card-gap: 10px; }
  .home-module-grid { gap: 10px; }
  .metric-label { margin-bottom: 13px; font-size: 12px; }
  .metric-value .unit, .metric-value > span:not(.metric-percent) { font-size: 12px; }
  .module-tile { min-height: 162px; }
  .module-name { font-size: 15px; }
  .module-tag { right: 10px; max-width: calc(100% - 64px); padding-left: 4px; padding-right: 4px; }
  .action-guide { padding: 19px; }
  .theme-option { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard *, .theme-option, .preview-option { transition: none !important; }
}

@media print {
  #main.is-home { max-width: none; width: 100%; padding: 0; }
  .dashboard, .dashboard.preview-phone { max-width: none; --metric-columns: repeat(4, minmax(0, 1fr)); --daily-columns: minmax(0, 1fr); }
  .metric-card, .module-tile, .action-guide { break-inside: avoid; box-shadow: none; }
  .theme-ring .metric-card { background: #fff; border-color: #d2d2d7; }
  .theme-ring .metric-label, .theme-ring .metric-value strong, .theme-ring .metric-target, .theme-ring .metric-gap, .theme-ring .metric-gap strong { color: #1d1d1f; }
  .theme-ring .metric-percent, .theme-ring .metric-value .unit { color: #55555a; }
  .theme-ring .metric-ring circle:first-child { stroke: #e5e5ea; }
}

/* Final integration: metric definitions remain legible in every dial theme. */
.theme-minimal .metric-dial { min-height: 49px; }
.theme-minimal .metric-ring { display: none; }
.metric-note { margin: 9px 0 0; color: #6e6e73; font-size: 12px; font-weight: 400; line-height: 1.65; }
.theme-ring .metric-note { color: #b7b7bf; text-align: center; }
.theme-bars .metric-note { grid-area: note; color: #536f8b; }
#settings-open { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) {
  .dashboard.preview-phone { padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  #context-name { max-width: 96px; }
  .header-actions { flex-shrink: 0; }
}
@media (max-width: 359px) {
  #context-name { max-width: 68px; }
}
@media print {
  .theme-ring .metric-note { color: #55555a; }
}