/* Reference composition for the existing plan/forecast data. */
.page-section[data-page="dashboard"] { container: dashboard-forecast / inline-size; }
.page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast {
  padding: var(--ui-space-5) !important;
  font-family: var(--ui-font-family);
  color: var(--ui-text-primary);
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-card);
}
.page-section[data-page="dashboard"] #dashboard-section-plan > .dashboard-card-head {
  height: auto;
  min-height: var(--forecast-icon-size);
  margin-bottom: var(--ui-space-5) !important;
  gap: var(--ui-space-5);
}
#dashboard-section-plan .forecast-heading {
  display: flex;
  align-items: center;
  gap: calc(var(--ui-space-6) + var(--ui-space-1));
  min-width: 0;
  flex: 1;
  max-width: none;
}
#dashboard-section-plan .forecast-heading h3 {
  font-size: var(--ui-font-size-kpi);
  line-height: var(--ui-line-height-tight);
  margin: 0 0 var(--ui-space-1);
  letter-spacing: -.04em;
  font-weight: var(--ui-font-weight-bold);
  font-family: var(--ui-font-family);
}
.page-section[data-page="dashboard"] #dashboard-section-plan > .dashboard-card-head .muted {
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-card-title);
}
#dashboard-section-plan .forecast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--forecast-icon-size);
  height: var(--forecast-icon-size);
  border-radius: var(--ui-radius-card);
  background: var(--ui-accent-subtle);
  color: var(--ui-accent-primary);
}
#dashboard-section-plan .forecast-icon .ui-icon {
  width: var(--ui-space-8);
  height: var(--ui-space-8);
  stroke-width: 2.3;
}
#dashboard-section-plan .dashboard-plan-mode {
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
}
.page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button {
  height: var(--forecast-control-height);
  padding-inline: var(--ui-space-8);
  font-size: var(--ui-font-size-card-title);
  border: 1px solid transparent;
  background: var(--forecast-track);
  color: var(--ui-text-primary);
  border-radius: var(--ui-radius-control);
  white-space: nowrap;
}
.page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button.active {
  border-color: var(--ui-accent-primary);
  color: var(--ui-accent-primary);
  background: var(--ui-bg-card);
}
#dashboard-section-plan .dashboard-card-toggle {
  width: var(--forecast-menu-width);
  height: var(--forecast-control-height);
  min-width: var(--forecast-menu-width);
  background: var(--ui-bg-card);
  border: var(--ui-border-card);
  border-radius: var(--ui-radius-control);
}
#dashboard-section-plan .dashboard-card-toggle .ui-icon {
  transform: rotate(90deg);
}
.page-section[data-page="dashboard"] #dashboard-section-plan > .dashboard-card-body {
  gap: var(--ui-space-4);
}
#dashboard-section-plan .forecast-progress-panel {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr) 244px;
  align-items: center;
  gap: var(--ui-space-6);
  min-height: var(--forecast-progress-height);
  padding: var(--ui-space-6);
  border: var(--ui-border-card);
  border-radius: var(--ui-radius-card);
  height: var(--forecast-progress-height);
  padding-block: var(--ui-space-5);
}
#dashboard-section-plan .forecast-calendar {
  display: flex;
  align-items: center;
  gap: var(--ui-space-6);
}
#dashboard-section-plan .forecast-calendar > div {
  display: grid;
  gap: var(--ui-space-2);
}
#dashboard-section-plan .forecast-calendar .forecast-icon {
  width: 80px;
  height: 84px;
}
#dashboard-section-plan .forecast-calendar span:not(.forecast-icon):not(.ui-icon) {
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-section-title);
}
#dashboard-section-plan .forecast-calendar strong {
  font-size: var(--forecast-value-size);
  line-height: 1.1;
  white-space: nowrap;
}
#dashboard-section-plan .forecast-scale {
  position: relative;
  min-width: 0;
  height: 112px;
  margin-right: var(--ui-space-8);
  padding-top: 48px;
}
#dashboard-section-plan .forecast-scale-track {
  height: var(--forecast-track-height);
  border-radius: var(--ui-radius-pill);
  overflow: hidden;
  background: var(--forecast-track);
}
#dashboard-section-plan .forecast-scale-fill {
  height: 100%;
  background: var(--forecast-elapsed-fill);
  border-radius: inherit;
}
#dashboard-section-plan .forecast-scale-marker {
  position: absolute;
  top: 44px;
  height: 32px;
  width: 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-primary);
  transform: translateX(-50%);
}
#dashboard-section-plan .forecast-scale-marker > div {
  position: absolute;
  bottom: 36px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ui-space-1);
  white-space: nowrap;
  color: var(--ui-accent-primary);
  font-size: var(--ui-font-size-card-title);
}
#dashboard-section-plan .forecast-scale-marker strong {
  color: var(--ui-bg-card);
  background: var(--ui-accent-primary);
  padding: var(--ui-space-1) var(--ui-space-3);
  border-radius: 6px;
  font-size: var(--ui-font-size-section-title);
}
#dashboard-section-plan .forecast-scale-marker.is-completion {
  background: var(--ui-status-warning);
}
#dashboard-section-plan .forecast-scale-marker.is-completion > div {
  right: auto;
  left: 22px;
  align-items: flex-start;
  color: var(--ui-text-secondary);
}
#dashboard-section-plan .forecast-scale-marker.is-completion strong {
  background: var(--ui-status-warning);
}
#dashboard-section-plan .forecast-scale-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-card-title);
}
#dashboard-section-plan .forecast-scale-ticks span {
  position: relative;
  padding-top: var(--ui-space-3);
}
#dashboard-section-plan .forecast-scale-ticks span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--ui-space-2);
  width: 2px;
  background: var(--ui-border-subtle);
}
#dashboard-section-plan .forecast-pace {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  border-left: 2px solid var(--ui-border-subtle);
  padding-left: var(--ui-space-8);
}
#dashboard-section-plan .forecast-pace .forecast-icon {
  border-radius: var(--ui-radius-pill);
  background: var(--ui-status-success-subtle);
  color: var(--ui-status-success);
}
#dashboard-section-plan .forecast-pace > div {
  display: grid;
  gap: var(--ui-space-1);
  white-space: nowrap;
}
#dashboard-section-plan .forecast-pace strong {
  font-size: var(--forecast-value-size);
  color: var(--ui-status-success);
}
#dashboard-section-plan .forecast-pace span:not(.forecast-icon):not(.ui-icon) {
  font-size: var(--ui-font-size-section-title);
  color: var(--ui-text-muted);
}
#dashboard-section-plan .forecast-pace.is-behind strong {
  color: var(--ui-accent-primary);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast.is-overview-line {
  gap: var(--ui-space-4);
}
#dashboard-section-plan .dashboard-forecast-kpi-line {
  gap: var(--ui-space-3);
}
.page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-forecast-kpi {
  display: flex;
  align-items: center;
  gap: var(--forecast-kpi-gap);
  padding: var(--forecast-kpi-padding);
  height: var(--forecast-kpi-height);
  border-radius: var(--ui-radius-card);
}
#dashboard-section-plan .forecast-kpi-copy {
  display: grid;
  gap: var(--ui-space-2);
  min-width: 0;
}
.page-section[data-page="dashboard"] #dashboard-section-plan .forecast-kpi-copy > span {
  font-size: var(--ui-font-size-card-title);
  color: var(--ui-text-muted);
  white-space: nowrap;
}
.page-section[data-page="dashboard"] #dashboard-section-plan .forecast-kpi-copy > strong {
  font-size: var(--forecast-value-size);
  white-space: nowrap;
  line-height: var(--ui-line-height-tight);
  letter-spacing: -.025em;
}
#dashboard-section-plan .dashboard-forecast-kpi:is(.is-plan,.is-forecast) .forecast-icon {
  background: var(--ui-status-info-subtle);
  color: var(--ui-status-info);
}
#dashboard-section-plan .dashboard-forecast-kpi.is-fact .forecast-icon {
  background: var(--forecast-purple-subtle);
  color: var(--forecast-purple);
}
#dashboard-section-plan .dashboard-forecast-kpi.is-remaining .forecast-icon {
  background: var(--forecast-track);
  color: var(--ui-text-muted);
}
#dashboard-section-plan .dashboard-forecast-kpi.is-success .forecast-icon {
  background: var(--ui-status-success-subtle);
  color: var(--ui-status-success);
}
#dashboard-section-plan .dashboard-forecast-branches {
  padding-top: var(--ui-space-3);
}
#dashboard-section-plan .dashboard-forecast-branches > summary {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section-title);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-tight);
}
#dashboard-section-plan .dashboard-forecast-branch-grid {
  gap: var(--ui-space-4);
  padding-top: calc(var(--ui-space-3) + var(--ui-space-1) / 2);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card {
  position: relative;
  display: block;
  height: var(--forecast-branch-height);
  min-height: var(--forecast-branch-height);
  padding: var(--ui-space-5) var(--ui-space-6);
  border: var(--ui-border-card);
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-card);
  padding-top: var(--ui-space-4);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-card.is-branch-1 {
  --plan-spark-color: var(--ui-branch-lenina);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-card.is-branch-2 {
  --plan-spark-color: var(--ui-branch-ulyanovyh);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-card.is-branch-3 {
  --plan-spark-color: var(--ui-branch-fifty);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: var(--ui-space-8);
  margin: 0 0 var(--ui-space-3);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-title {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  font-size: var(--forecast-branch-title-size);
  font-weight: var(--ui-font-weight-bold);
  color: var(--ui-text-primary);
  letter-spacing: -.01em;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-title-dot {
  display: block;
  width: var(--ui-space-4);
  height: var(--ui-space-4);
  flex: 0 0 var(--ui-space-4);
  background: var(--plan-spark-color);
  border-radius: var(--ui-radius-pill);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-main {
  font-size: var(--ui-font-size-kpi);
  font-weight: var(--ui-font-weight-bold);
  color: var(--ui-accent-primary);
  white-space: nowrap;
  letter-spacing: -.02em;
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: 74%;
  margin: 0;
  gap: var(--ui-space-2);
  background: transparent;
  border: 0;
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--ui-space-1);
  padding: var(--ui-space-3) var(--ui-space-4);
  min-height: var(--forecast-stat-height);
  border: var(--ui-border-card);
  border-radius: var(--ui-radius-control);
  background: var(--ui-bg-card);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line span {
  color: var(--ui-text-muted);
  font-size: var(--ui-font-size-card-title);
  line-height: 1.1;
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line strong {
  font-size: var(--ui-font-size-section-title);
  color: var(--ui-text-primary);
  text-align: left;
  line-height: 1.1;
  white-space: nowrap;
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation {
  grid-column: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--ui-space-5);
  margin-top: var(--ui-space-1);
  border-color: transparent;
  background: var(--ui-status-success-subtle);
  height: var(--forecast-stat-height);
  padding-block: var(--ui-space-2);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation > div {
  display: grid;
  gap: var(--ui-space-2);
  text-align: left;
}
#dashboard-section-plan #dashboardPlanForecast .forecast-deviation-icon .ui-icon {
  transform: rotate(-90deg);
  width: var(--ui-space-6);
  height: var(--ui-space-6);
  color: var(--ui-status-success);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation.positive strong {
  color: var(--ui-status-success);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation.negative {
  background: var(--ui-accent-subtle);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation.negative strong {
  color: var(--ui-accent-primary);
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation.negative .forecast-deviation-icon .ui-icon {
  transform: rotate(90deg);
  color: var(--ui-accent-primary);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-sparkline {
  position: absolute;
  width: 32%;
  height: 92px;
  right: var(--ui-space-6);
  bottom: var(--ui-space-5);
  opacity: 1;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-chart-plan {
  stroke: var(--plan-spark-color);
  opacity: .5;
  stroke-width: 1;
  stroke-dasharray: none;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-chart-actual {
  stroke-width: 1.8;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-chart-area {
  opacity: .045;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-chart-end {
  display: none;
}
.page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-head {
  height: var(--forecast-icon-size);
  min-height: var(--forecast-icon-size);
  margin-bottom: var(--ui-space-2) !important;
  border-bottom: 0;
}
.page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-head .muted {
  font-size: var(--forecast-description-size);
  line-height: var(--ui-line-height-tight);
  max-width: none;
}
#dashboard-section-plan .forecast-heading > div {
  min-width: 0;
  transform: translateY(-5px);
}
#dashboard-section-plan .dashboard-card-toggle::before, #dashboard-section-plan .dashboard-card-toggle::after {
  display: none;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation {
  justify-content: flex-start;
}
#dashboard-section-plan #dashboardPlanForecast .plan-forecast-line span {
  font-weight: var(--ui-font-weight-regular);
}
.page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-body {
  gap: calc(var(--ui-space-4) + var(--ui-space-1) / 2);
}
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header {
  margin-bottom: var(--ui-space-2);
  align-items: flex-start;
}
#dashboard-section-plan .forecast-calendar .ui-icon {
  width: var(--ui-space-10);
  height: var(--ui-space-10);
}
#dashboard-section-plan .dashboard-card-head-actions {
  gap: var(--ui-space-5);
}
.page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button[data-plan-mode="minimal"] {
  min-width: 232px;
}
.page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button[data-plan-mode="positive"] {
  min-width: 188px;
}
.page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-head .muted, .page-section[data-page="dashboard"] #dashboard-section-plan .forecast-kpi-copy > span {
  font-size: var(--forecast-label-size);
}

#dashboard-section-plan .dashboard-forecast-kpi-line.is-loading .ui-skeleton-card {
  min-height: var(--forecast-kpi-height);
}

/* Separate badge placement from the truthful, clamped marker position. */
#dashboard-section-plan .forecast-scale-marker {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transform: none;
  pointer-events: none;
}
#dashboard-section-plan .forecast-scale-marker::after {
  content: "";
  position: absolute;
  left: var(--marker-position);
  top: 44px;
  width: var(--ui-space-2);
  height: var(--ui-space-8);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-primary);
  transform: translateX(-50%);
}
#dashboard-section-plan .forecast-scale-marker > div {
  left: var(--marker-position);
  right: auto;
  bottom: calc(100% - var(--ui-space-10));
  transform: translateX(calc(-100% - 6px));
}
#dashboard-section-plan .forecast-scale-marker.is-completion { background: transparent; }
#dashboard-section-plan .forecast-scale-marker.is-completion::after { background: var(--ui-status-warning); }
#dashboard-section-plan .forecast-scale-marker.is-completion > div {
  left: var(--marker-position);
  transform: translateX(18px);
}
#dashboard-section-plan .forecast-scale.has-edge-markers .forecast-scale-marker.is-elapsed > div {
  left: 0;
  right: auto;
  transform: none;
  align-items: flex-start;
}
#dashboard-section-plan .forecast-scale.has-edge-markers .forecast-scale-marker.is-completion > div {
  left: auto;
  right: 0;
  transform: none;
  align-items: flex-end;
}
@container dashboard-forecast (max-width:2000px) {
  #dashboard-section-plan .forecast-progress-panel {
    grid-template-columns: 260px minmax(0,1fr) 210px;
    gap: var(--ui-space-4);
  }
  #dashboard-section-plan .forecast-calendar {
    gap: var(--ui-space-3);
  }
  #dashboard-section-plan .forecast-calendar .forecast-icon {
    width: var(--forecast-icon-size);
    height: var(--forecast-icon-size);
  }
  #dashboard-section-plan .forecast-calendar strong, #dashboard-section-plan .forecast-pace strong {
    font-size: var(--ui-font-size-section-title);
  }
  #dashboard-section-plan .forecast-pace {
    padding-left: var(--ui-space-4);
  }
  #dashboard-section-plan .dashboard-forecast-kpi-line {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  #dashboard-section-plan .dashboard-forecast-branch-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines {
    width: 100%;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card {
    height: 300px;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line {
    padding: var(--ui-space-2);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line strong {
    font-size: var(--ui-font-size-card-title);
  }
  #dashboard-section-plan .forecast-scale-marker > div > span {
    display: none;
  }
}

@container dashboard-forecast (max-width:1300px) {
  #dashboard-section-plan .dashboard-forecast-branch-grid { grid-template-columns: 1fr; }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card { height: var(--forecast-branch-height); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header { flex-direction: row; }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines { width: 74%; }
}

@container dashboard-forecast (max-width:1026px) {
  #dashboard-section-plan .forecast-heading h3 {
    font-size: var(--ui-font-size-page-title);
  }
  #dashboard-section-plan .dashboard-card-head {
    flex-wrap: wrap;
  }
  #dashboard-section-plan .forecast-progress-panel {
    grid-template-columns: 240px minmax(0,1fr);
    height: auto;
  }
  #dashboard-section-plan .forecast-pace {
    grid-column: 1/-1;
    border-left: 0;
    padding-left: 0;
  }
  #dashboard-section-plan .forecast-scale {
    margin-right: var(--ui-space-10);
  }
  #dashboard-section-plan .dashboard-forecast-branch-grid {
    grid-template-columns: 1fr;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card {
    height: var(--forecast-branch-height);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header {
    flex-direction: row;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines {
    width: 74%;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-head {
    height: auto;
    align-items: stretch;
    flex-direction: column;
  }
  #dashboard-section-plan .dashboard-forecast-kpi-line {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button[data-plan-mode] {
    min-width: 0;
  }
}

@container dashboard-forecast (max-width:700px) {
  #dashboard-section-plan .forecast-progress-panel {
    grid-template-columns: 1fr;
  }
  #dashboard-section-plan .forecast-scale {
    margin: var(--ui-space-8) var(--ui-space-4) 0;
  }
  #dashboard-section-plan .dashboard-forecast-kpi-line {
    grid-template-columns: 1fr;
  }
  #dashboard-section-plan .dashboard-card-head-actions {
    flex-wrap: wrap;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button {
    padding-inline: var(--ui-space-3);
    font-size: var(--ui-font-size-body);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-title {
    font-size: var(--ui-font-size-card-title);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-main {
    font-size: var(--ui-font-size-section-title);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines {
    width: 100%;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card {
    height: 280px;
  }
}

@container dashboard-forecast (max-width:850px) {
  #dashboard-section-plan .dashboard-forecast-kpi-line {
    grid-template-columns: 1fr;
  }
}

@container dashboard-forecast (max-width:2000px) {
  #dashboard-section-plan .forecast-scale .forecast-scale-marker.is-elapsed > div {
    left: 0; right: auto; transform: none; align-items: flex-start;
  }
  #dashboard-section-plan .forecast-scale .forecast-scale-marker.is-completion > div {
    left: auto; right: 0; transform: none; align-items: flex-end;
  }
}
/* Keep the reference's six-column summary on a normal wide desktop. */
@container dashboard-forecast (min-width:1301px) and (max-width:2000px) {
  #dashboard-section-plan {
    --forecast-icon-size: 40px;
    --forecast-control-height: 40px;
    --forecast-menu-width: 44px;
    --forecast-value-size: 20px;
    --forecast-label-size: 12px;
    --forecast-description-size: 14px;
    --forecast-branch-title-size: 14px;
    --forecast-kpi-height: 72px;
    --forecast-kpi-padding: 8px;
    --forecast-kpi-gap: 12px;
    --forecast-branch-height: 180px;
    --forecast-progress-height: 112px;
  }
  #dashboard-section-plan .forecast-heading h3 { font-size:var(--ui-font-size-page-title); }
  #dashboard-section-plan .forecast-heading > div { transform:none; }
  .page-section[data-page="dashboard"] #dashboard-section-plan.dashboard-overview__forecast > .dashboard-card-head { height:auto; }
  .page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button { padding-inline:var(--ui-space-5); font-size:var(--ui-font-size-body); }
  .page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button[data-plan-mode] { min-width:0; }
  #dashboard-section-plan .forecast-progress-panel { grid-template-columns:220px minmax(0,1fr) 180px; padding-block:var(--ui-space-3); }
  #dashboard-section-plan .forecast-calendar span:not(.forecast-icon):not(.ui-icon),
  #dashboard-section-plan .forecast-pace span:not(.forecast-icon):not(.ui-icon) { font-size:var(--ui-font-size-body); }
  #dashboard-section-plan .forecast-icon .ui-icon { width:var(--ui-space-6); height:var(--ui-space-6); }
  #dashboard-section-plan .forecast-scale { height:88px; padding-top:var(--ui-space-8); }
  #dashboard-section-plan .forecast-scale-track { height:var(--ui-space-3); }
  #dashboard-section-plan .forecast-scale-marker::after { top:28px; height:var(--ui-space-5); width:6px; }
  #dashboard-section-plan .forecast-scale-marker > div { bottom:calc(100% - var(--ui-space-6)); }
  #dashboard-section-plan .forecast-scale-marker strong { font-size:var(--ui-font-size-card-title); }
  #dashboard-section-plan .forecast-scale-ticks { font-size:var(--ui-font-size-caption); }
  #dashboard-section-plan .dashboard-forecast-kpi-line { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card { height:var(--forecast-branch-height); padding:var(--ui-space-3) var(--ui-space-4); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header { flex-direction:row; min-height:var(--ui-space-6); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-title { font-size:var(--forecast-branch-title-size); gap:var(--ui-space-2); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-main { font-size:22px; }
  #dashboard-section-plan #dashboardPlanForecast .plan-forecast-title-dot { width:var(--ui-space-3); height:var(--ui-space-3); flex-basis:var(--ui-space-3); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines { width:80%; gap:var(--ui-space-2); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line { min-height:var(--ui-space-12); padding:var(--ui-space-2); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line span { font-size:var(--ui-font-size-caption); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line strong { font-size:var(--ui-font-size-body); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation { min-height:var(--ui-control-height-lg); height:var(--ui-control-height-lg); gap:var(--ui-space-2); }
  #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation > div { gap:var(--ui-space-1); }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-sparkline { height:60px; right:var(--ui-space-4); bottom:var(--ui-space-4); }
}

/* Narrow salon cards keep money and labels fully readable. */
@container dashboard-forecast (max-width:700px) {
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card {
    height: auto;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-card-header {
    flex-direction: column;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-line strong {
    font-size: var(--ui-font-size-body);
  }
  .page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-sparkline {
    position: static;
    width: 100%;
    height: var(--ui-space-16);
  }
}

/* The deviation copy is not another legacy metric tile. */
.page-section[data-page="dashboard"] #dashboard-section-plan #dashboardPlanForecast .plan-forecast-deviation > div {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
}
@container dashboard-forecast (max-width:700px) {
  #dashboard-section-plan .dashboard-card-head-actions { gap: var(--ui-space-2); }
  #dashboard-section-plan .dashboard-plan-mode { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-section[data-page="dashboard"] #dashboard-section-plan .dashboard-plan-mode-button { padding-inline: var(--ui-space-2); font-size: var(--ui-font-size-caption); }
  #dashboard-section-plan .dashboard-card-toggle { width: var(--ui-space-10); min-width: var(--ui-space-10); }
}

/* Percentage badges follow their own markers; nearby badges share one row with leader lines. */
#dashboard-section-plan .forecast-progress-panel { height: auto; }
#dashboard-section-plan .forecast-scale {
  --forecast-scale-top: 64px;
  --forecast-scale-height: 128px;
  --forecast-badge-offset: 0px;
  padding-top: calc(var(--forecast-scale-top) + var(--forecast-badge-offset));
  height: calc(var(--forecast-scale-height) + var(--forecast-badge-offset));
}
#dashboard-section-plan .forecast-scale .forecast-scale-marker > div,
#dashboard-section-plan .forecast-scale .forecast-scale-marker.is-elapsed > div,
#dashboard-section-plan .forecast-scale .forecast-scale-marker.is-completion > div {
  top: 0;
  bottom: auto;
  right: auto;
  left: var(--marker-position);
  width: max-content;
  transform: translateX(-50%);
  align-items: center;
}
#dashboard-section-plan .forecast-scale .forecast-scale-marker > div > span { display: none; }
#dashboard-section-plan .forecast-scale .forecast-scale-marker::after {
  top: calc(var(--forecast-scale-top) + var(--forecast-badge-offset) - var(--ui-space-1));
}
@container dashboard-forecast (min-width:1301px) and (max-width:2000px) {
  #dashboard-section-plan .forecast-scale { --forecast-scale-top: 48px; --forecast-scale-height: 104px; }
}

#dashboard-section-plan .forecast-badge-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#dashboard-section-plan .forecast-badge-leaders line { stroke: var(--ui-accent-primary); stroke-width: 1; }
#dashboard-section-plan .forecast-badge-leaders .is-completion { stroke: var(--ui-status-warning); }