@layer components {
  .rd-forecast-screen {
    display: flex;
    flex-direction: column;
    gap: var(--rd-sp-4);
  }

  .rd-forecast-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5em;
    padding-inline: 0.4em;
    border: 1px solid color-mix(in oklch, currentColor 30%, transparent);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-filter-form {
    display: flex;
    align-items: end;
    gap: var(--rd-sp-2);
    flex-wrap: wrap;
    padding: var(--rd-sp-3);
  }

  .rd-forecast-filter-card {
    background: var(--rd-bg-raised);
  }

  .rd-forecast-filter-actions {
    display: flex;
    align-items: center;
    gap: var(--rd-sp-2);
    margin-inline-start: auto;
  }

  .rd-forecast-field-xs {
    min-inline-size: 110px;
  }

  .rd-forecast-field-sm {
    min-inline-size: 130px;
  }

  .rd-forecast-field-md {
    min-inline-size: 150px;
  }

  .rd-forecast-field-lg {
    min-inline-size: 160px;
  }

  .rd-forecast-position-field {
    max-inline-size: 200px;
  }

  .rd-forecast-target-input {
    max-inline-size: 110px;
  }

  .rd-forecast-table-indent {
    padding-inline-start: 28px;
  }

  .rd-forecast-mini-label {
    font-size: var(--rd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-fg-subtle);
  }

  .rd-forecast-legend {
    display: flex;
    align-items: center;
    gap: var(--rd-sp-3);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-legend span,
  .rd-forecast-swatch,
  .rd-forecast-rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .rd-forecast-swatch {
    inline-size: 10px;
    block-size: 10px;
    border: 1px solid var(--rd-border-strong);
  }

  .rd-forecast-swatch.is-full,
  .rd-forecast-bar.is-full {
    background: var(--rd-accent);
  }

  .rd-forecast-swatch.is-weighted,
  .rd-forecast-bar.is-weighted {
    background: var(--rd-info);
  }

  .rd-forecast-rule {
    inline-size: 22px;
    border-top: 1px dashed var(--rd-fg-subtle);
  }

  .rd-forecast-month-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(42px, 1fr));
    align-items: end;
    gap: var(--rd-sp-2);
    min-block-size: 250px;
    padding-block-start: var(--rd-sp-5);
    overflow-x: auto;
    background-image:
      linear-gradient(to bottom, color-mix(in oklch, var(--rd-border) 55%, transparent) 1px, transparent 1px);
    background-size: 100% 48px;
  }

  .rd-forecast-chart-plot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rd-sp-3);
  }

  .rd-forecast-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-block-size: 220px;
    padding-block: calc(var(--rd-sp-5) + 2px) 30px;
    color: var(--rd-fg-subtle);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-2xs);
    text-align: right;
    white-space: nowrap;
  }

  .rd-forecast-month {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-inline-size: 42px;
    min-block-size: 220px;
  }

  .rd-forecast-month-index {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    text-align: center;
    color: var(--rd-fg-faint);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-2xs);
  }

  .rd-forecast-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 4px;
    block-size: 190px;
    border-bottom: 1px solid var(--rd-border);
  }

  .rd-forecast-bar {
    inline-size: 12px;
    min-block-size: 1px;
    border: 1px solid color-mix(in oklch, var(--pop-ink) 35%, transparent);
  }

  .rd-forecast-bar.is-full {
    block-size: var(--full-h);
  }

  .rd-forecast-bar.is-weighted {
    block-size: var(--weighted-h);
    opacity: 0.82;
  }

  .rd-forecast-target-mark {
    position: absolute;
    inset-inline: 8%;
    inset-block-start: calc(var(--target-y) + 22px);
    border-top: 1px dashed var(--rd-fg-subtle);
    opacity: 0.85;
  }

  .rd-forecast-month-target-line {
    position: absolute;
    inset-block-start: var(--rd-sp-5);
    inset-block-end: 30px;
    inset-inline: 0;
    z-index: 2;
    pointer-events: none;
  }

  .rd-forecast-month-target-line polyline {
    fill: none;
    stroke: var(--rd-fg-subtle);
    stroke-width: 1.3;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
  }

  .rd-forecast-month-label {
    margin-block-start: var(--rd-sp-2);
    color: var(--rd-fg-muted);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-xs);
    text-align: center;
  }

  .rd-forecast-cumulative {
    display: grid;
    grid-template-columns: minmax(180px, 0.35fr) 1fr;
    gap: var(--rd-sp-5);
    align-items: center;
    margin-block-start: var(--rd-sp-6);
    padding-block-start: var(--rd-sp-4);
    border-top: 1px solid var(--rd-border);
  }

  .rd-forecast-snapshot-overview .rd-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, max-content);
    gap: var(--rd-sp-6);
    align-items: center;
  }

  .rd-forecast-sparkline {
    inline-size: 100%;
    block-size: 80px;
    overflow: visible;
  }

  .rd-forecast-sparkline-lg {
    block-size: 110px;
  }

  .rd-forecast-sparkline polyline {
    fill: none;
    stroke: var(--rd-accent);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .rd-forecast-sparkline polyline.is-target {
    stroke: var(--rd-fg-subtle);
    stroke-dasharray: 4 4;
    opacity: 0.9;
  }

  .rd-forecast-sparkline polygon {
    fill: var(--rd-accent-soft);
    stroke: none;
  }

  .rd-forecast-quarter-row td {
    font-weight: 600;
    background: color-mix(in oklch, var(--rd-bg-sunken) 65%, transparent);
  }

  .rd-forecast-month-row td {
    color: var(--rd-fg-muted);
  }

  .rd-forecast-pacing {
    position: relative;
    inline-size: min(170px, 100%);
    block-size: 8px;
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
  }

  .rd-forecast-pacing > span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--pacing);
    background: var(--rd-fg-faint);
  }

  .rd-forecast-pacing > i {
    position: absolute;
    inset-block: -4px;
    inset-inline-start: 83.33%;
    border-left: 1px solid var(--rd-fg-muted);
  }

  .rd-forecast-pacing.is-positive > span { background: var(--rd-success); }
  .rd-forecast-pacing.is-watch > span { background: var(--rd-warn); }
  .rd-forecast-pacing.is-negative > span { background: var(--rd-danger); }

  .rd-forecast-pacing-label {
    display: inline-block;
    margin-inline-start: var(--rd-sp-2);
    color: var(--rd-fg-subtle);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-2xs);
  }

  .is-positive {
    color: var(--rd-success) !important;
  }

  .is-negative {
    color: var(--rd-danger) !important;
  }

  .is-neutral,
  .is-muted {
    color: var(--rd-fg-muted) !important;
  }

  .is-watch {
    color: var(--rd-warn) !important;
  }

  .rd-forecast-item-link {
    font-weight: 700;
  }

  .rd-forecast-dashboard-detail-layout,
  .rd-forecast-form-layout,
  .rd-forecast-item-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: var(--rd-sp-4);
    align-items: start;
  }

  .rd-forecast-form-layout {
    margin-block-end: var(--rd-sp-4);
  }

  .rd-forecast-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--rd-sp-4);
  }

  .rd-forecast-sidebar .rd-forecast-snapshot-card,
  .rd-forecast-sidebar .rd-forecast-trend-card,
  .rd-forecast-sidebar .rd-forecast-material-card {
    margin-block-start: 0;
  }

  .rd-forecast-snapshot-card,
  .rd-forecast-trend-card,
  .rd-forecast-material-card {
    margin-block-start: var(--rd-sp-4);
  }

  .rd-forecast-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: var(--rd-sp-2);
    margin-block-start: var(--rd-sp-3);
  }

  .rd-forecast-snapshot-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--rd-sp-3);
    align-items: center;
    color: var(--rd-fg);
    text-decoration: none;
  }

  .rd-forecast-snapshot-list-item small,
  .rd-forecast-snapshot-list-item .rd-num small {
    display: block;
    color: var(--rd-fg-subtle);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-dot,
  .rd-forecast-timeline-dot {
    inline-size: 8px;
    block-size: 8px;
    background: var(--rd-fg-faint);
    border: 1px solid var(--rd-border-strong);
  }

  .rd-forecast-dot.is-current,
  .rd-forecast-timeline-dot.is-current {
    background: var(--rd-accent);
    box-shadow: 0 0 0 4px var(--rd-accent-soft);
  }

  .rd-forecast-change-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-sp-3);
    padding: var(--rd-sp-3);
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
  }

  .rd-forecast-change-amounts {
    margin-block-start: var(--rd-sp-2);
    color: var(--rd-fg-muted);
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-card-link {
    display: flex;
    justify-content: center;
    margin-block-start: var(--rd-sp-3);
  }

  .rd-forecast-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rd-sp-3);
    margin-block: calc(var(--rd-sp-2) * -1) var(--rd-sp-4);
  }

  .rd-forecast-required {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-required::after {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    background: var(--rd-accent);
  }

  .rd-forecast-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rd-sp-4);
  }

  .rd-forecast-form-grid > turbo-frame {
    display: block;
  }

  .rd-forecast-span-2 {
    grid-column: span 2;
  }

  .rd-forecast-span-3 {
    grid-column: 1 / -1;
  }

  .rd-forecast-stage-field {
    grid-column: span 2;
  }

  .rd-forecast-stage-seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--rd-border-strong);
    background: var(--rd-bg-sunken);
  }

  .rd-forecast-stage-option {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--rd-sp-2) var(--rd-sp-3);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
    font-weight: 600;
    cursor: pointer;
    border-inline-end: 1px solid var(--rd-border);
    background: transparent;
    transition:
      background var(--rd-dur-fast) var(--rd-ease),
      color var(--rd-dur-fast) var(--rd-ease);
  }

  .rd-forecast-stage-option:last-child {
    border-inline-end: 0;
  }

  .rd-forecast-stage-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .rd-forecast-stage-option:has(input:checked),
  .rd-forecast-stage-option.is-selected {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    box-shadow: inset 0 -2px 0 var(--rd-accent);
  }

  .rd-forecast-probability-field {
    grid-column: auto;
  }

  .rd-forecast-percent-input {
    display: flex;
    align-items: center;
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
  }

  .rd-forecast-percent-input input {
    border: 0;
    background: transparent;
    text-align: right;
    font-family: var(--rd-font-mono);
  }

  .rd-forecast-percent-input span {
    padding-inline-end: var(--rd-sp-3);
    color: var(--rd-fg-subtle);
    font-family: var(--rd-font-mono);
  }

  .rd-forecast-form-summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--rd-sp-2) var(--rd-sp-5);
    margin: 0 0 var(--rd-sp-4);
    padding-block-end: var(--rd-sp-4);
    border-bottom: 1px solid var(--rd-border);
  }

  .rd-forecast-form-summary dt {
    color: var(--rd-fg-subtle);
    font-size: var(--rd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .rd-forecast-form-summary dd {
    margin: 0;
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-xl);
    color: var(--rd-fg);
  }

  .rd-forecast-schedule-table input[type="month"],
  .rd-forecast-schedule-table input[type="number"],
  .rd-forecast-schedule-table input[type="text"] {
    inline-size: 100%;
    min-inline-size: 110px;
  }

  .rd-forecast-switch {
    display: inline-flex;
    align-items: center;
  }

  .rd-forecast-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .rd-forecast-switch span {
    position: relative;
    inline-size: 38px;
    block-size: 20px;
    background: var(--rd-bg-active);
    border: 1px solid var(--rd-border);
  }

  .rd-forecast-switch span::before {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 12px;
    block-size: 12px;
    background: var(--rd-fg-faint);
    transition: transform var(--rd-dur-fast) var(--rd-ease);
  }

  .rd-forecast-switch input:checked + span {
    background: var(--rd-accent-soft);
  }

  .rd-forecast-switch input:checked + span::before {
    transform: translateX(18px);
    background: var(--rd-accent);
  }

  .rd-forecast-remove-row {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-remove-row input {
    accent-color: var(--rd-danger);
  }

  .rd-forecast-title-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rd-sp-2);
    margin-block-start: var(--rd-sp-2);
  }

  .rd-forecast-schedule-readonly tr.is-inactive td {
    color: var(--rd-fg-faint);
    text-decoration: line-through;
  }

  .rd-forecast-def-list {
    display: grid;
    grid-template-columns: minmax(120px, 0.18fr) 1fr;
    gap: 0;
    margin: 0;
  }

  .rd-forecast-def-list dt,
  .rd-forecast-def-list dd {
    padding-block: var(--rd-sp-3);
    border-bottom: 1px solid var(--rd-border);
  }

  .rd-forecast-def-list dt {
    color: var(--rd-fg-subtle);
    font-size: var(--rd-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .rd-forecast-def-list dd {
    margin: 0;
  }

  .rd-forecast-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
  }

  .rd-forecast-notes {
    margin-block-start: var(--rd-sp-5);
    padding-block-start: var(--rd-sp-4);
    border-top: 1px solid var(--rd-border);
  }

  .rd-forecast-notes h3 {
    margin: 0 0 var(--rd-sp-2);
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-muted);
  }

  .rd-forecast-year-seg {
    box-shadow: none;
  }

  .rd-forecast-movement {
    display: grid;
    gap: var(--rd-sp-2);
    justify-items: start;
  }

  .rd-forecast-movement span:first-child {
    color: var(--rd-fg-subtle);
    font-size: var(--rd-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .rd-forecast-movement strong {
    color: var(--rd-fg);
    font-size: var(--rd-text-xl);
    line-height: var(--rd-leading-tight);
  }

  .rd-forecast-movement-value {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
  }

  .rd-forecast-movement small {
    color: var(--rd-fg-muted);
  }

  .rd-forecast-snapshot-table td:first-child {
    position: relative;
    padding-inline-start: 36px;
  }

  .rd-forecast-timeline-dot {
    position: absolute;
    inset-inline-start: 16px;
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .rd-forecast-note-card .rd-card-body {
    display: flex;
    gap: var(--rd-sp-3);
    align-items: start;
  }

  .rd-forecast-note-card p {
    margin: var(--rd-sp-1) 0 0;
  }

  .rd-forecast-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
  }

  .rd-forecast-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rd-sp-4);
  }

  .rd-forecast-compare-card.is-current {
    border-color: var(--rd-accent);
    box-shadow: 0 0 0 3px var(--rd-accent-soft);
  }

  @media (max-width: 1100px) {
    .rd-forecast-form-grid,
    .rd-forecast-stage-field,
    .rd-forecast-cumulative,
    .rd-forecast-snapshot-overview .rd-card-body,
    .rd-forecast-compare-grid,
    .rd-forecast-dashboard-detail-layout,
    .rd-forecast-form-layout,
    .rd-forecast-item-detail-layout {
      grid-template-columns: 1fr;
    }

    .rd-forecast-span-2,
    .rd-forecast-span-3,
    .rd-forecast-stage-field {
      grid-column: 1;
    }
  }

  @media (max-width: 760px) {
    .rd-forecast-filter-actions,
    .rd-forecast-form-actions {
      inline-size: 100%;
      justify-content: stretch;
      margin-inline-start: 0;
    }

    .rd-forecast-filter-actions .rd-btn,
    .rd-forecast-form-actions .rd-btn {
      flex: 1;
    }

    .rd-forecast-legend {
      inline-size: 100%;
      justify-content: space-between;
    }

    .rd-forecast-def-list {
      grid-template-columns: 1fr;
    }

    .rd-forecast-def-list dt {
      padding-block-end: 0;
      border-bottom: 0;
    }
  }
}