@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: 0;
  }

  .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-details .rd-forecast-filter-form .rd-field {
    flex: 1 1 auto;
  }

  .rd-forecast-details .rd-forecast-filter-form .rd-forecast-field-xs {
    flex-basis: 110px;
  }

  .rd-forecast-details .rd-forecast-filter-form .rd-forecast-field-sm {
    flex-basis: 130px;
  }

  .rd-forecast-details .rd-forecast-filter-form .rd-forecast-field-lg {
    flex-basis: 180px;
  }

  .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-past-open-callout {
    align-items: flex-start;
  }

  .rd-forecast-past-open-callout p {
    margin: var(--rd-sp-1) 0 0;
    color: var(--rd-fg-muted);
  }

  .rd-forecast-past-open-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--rd-sp-3);
  }

  .rd-forecast-past-open-months {
    margin-block-start: var(--rd-sp-3);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
  }

  .rd-forecast-past-open-list {
    display: grid;
    gap: var(--rd-sp-2);
    margin: var(--rd-sp-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .rd-forecast-past-open-list li {
    display: grid;
    grid-template-columns: minmax(70px, max-content) minmax(0, 1fr) max-content;
    gap: var(--rd-sp-3);
    align-items: baseline;
    padding-block: var(--rd-sp-1);
    border-top: 1px solid color-mix(in oklch, var(--rd-border) 70%, transparent);
  }

  .rd-forecast-past-open-list span,
  .rd-forecast-past-open-list strong {
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-sm);
  }

  .rd-forecast-vega-chart {
    border-bottom: 1px solid var(--rd-border);
  }

  .rd-forecast-vega-chart > div {
    min-block-size: 280px;
  }

  .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-engagement-link {
    font-weight: 700;
  }

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

  .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-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-engagement-details-grid {
    grid-template-columns: minmax(120px, 0.16fr) minmax(0, 1fr) minmax(120px, 0.16fr) minmax(0, 1fr);
  }

  .rd-engagement-inline-textarea {
    display: grid;
    gap: var(--rd-sp-2);
    inline-size: 100%;
  }

  .rd-engagement-inline-textarea .inline-editable,
  .rd-engagement-inline-textarea textarea {
    inline-size: 100%;
  }

  .rd-engagement-inline-textarea textarea {
    min-block-size: 7rem;
  }

  .rd-engagement-inline-errors:empty {
    display: none;
  }

  .rd-engagement-title .inline-editable-wrapper {
    max-inline-size: 100%;
  }

  .rd-engagement-title-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    inline-size: min(100%, 820px);
  }

  .rd-engagement-title-inline .inline-editable {
    cursor: text;
    padding: 0 4px;
    margin-inline: -4px;
    border-radius: var(--rd-radius-sm);
  }

  .rd-engagement-title-inline .inline-editable:hover,
  .rd-engagement-inline-field .inline-editable:hover {
    background: var(--rd-bg-hover);
    box-shadow: inset 0 0 0 1px var(--rd-border);
  }

  .rd-engagement-title-inline .inline-edit-input {
    inline-size: min(100%, 820px);
    min-block-size: calc(1em * 1.35);
    padding-block: 0.08em;
    font: inherit;
    font-weight: inherit;
    line-height: var(--rd-leading-tight);
  }

  .rd-engagement-inline-field {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    max-inline-size: 100%;
  }

  .rd-engagement-inline-field .inline-editable {
    min-block-size: 1.8rem;
    padding: 2px 6px;
    margin-inline: -6px;
    border-radius: var(--rd-radius-sm);
    cursor: pointer;
  }

  .rd-engagement-inline-field .inline-edit-input {
    min-inline-size: 180px;
    max-inline-size: 100%;
  }

  .rd-engagement-inline-def-list dd {
    min-width: 0;
  }

  .rd-engagement-inline-def-list .inline-save-indicator {
    color: var(--rd-fg-subtle);
    font-size: var(--rd-text-xs);
    white-space: nowrap;
  }

  .rd-engagement-inline-def-list .inline-save-indicator.error {
    color: var(--rd-danger);
  }

  .rd-engagement-inline-def-list .inline-save-indicator.hidden {
    display: none;
  }

  .rd-engagement-linked-projects,
  .rd-engagement-linked-project,
  .rd-engagement-billing-status {
    display: flex;
    align-items: center;
    gap: var(--rd-sp-2);
    flex-wrap: wrap;
  }

  .rd-engagement-project-linker {
    display: inline-flex;
    position: relative;
  }

  .rd-engagement-project-linker summary {
    list-style: none;
  }

  .rd-engagement-project-linker summary::-webkit-details-marker {
    display: none;
  }

  .rd-engagement-project-link-form {
    display: flex;
    align-items: center;
    gap: var(--rd-sp-2);
    flex-wrap: wrap;
  }

  .rd-engagement-project-link-form {
    margin-block-start: var(--rd-sp-2);
  }

  .rd-engagement-billing-inline .inline-editable {
    min-block-size: 1.6rem;
  }

  .rd-engagement-billing-amount .inline-edit-input {
    min-inline-size: 8rem;
    text-align: end;
  }

  .rd-engagement-billing-add {
    display: flex;
    justify-content: flex-end;
    padding: var(--rd-sp-3) var(--rd-sp-4);
    border-top: 1px solid var(--rd-border);
    background: var(--rd-bg-sunken);
  }

  .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-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-local-nav,
  .rd-forecast-segment-group {
    display: flex;
    align-items: center;
    gap: var(--rd-sp-2);
    flex-wrap: wrap;
  }

  .rd-forecast-local-nav {
    padding-block-end: var(--rd-sp-1);
  }

  .rd-forecast-local-nav-item,
  .rd-forecast-segment {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    padding: var(--rd-sp-2) var(--rd-sp-3);
    color: var(--rd-fg-muted);
    text-decoration: none;
    background: var(--rd-bg-raised);
    border: 1px solid var(--rd-border);
    font-size: var(--rd-text-sm);
    font-weight: 650;
  }

  .rd-forecast-local-nav-item:hover,
  .rd-forecast-local-nav-item.is-active,
  .rd-forecast-segment:hover,
  .rd-forecast-segment.is-active {
    color: var(--rd-accent);
    background: var(--rd-accent-soft);
    border-color: color-mix(in oklch, var(--rd-accent) 45%, var(--rd-border));
  }

  .rd-forecast-control-card {
    display: grid;
    gap: var(--rd-sp-3);
    padding: var(--rd-sp-3);
  }

  .rd-forecast-mode-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-sp-3);
    flex-wrap: wrap;
  }

  .rd-forecast-category-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-sp-2);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
    font-weight: 700;
  }

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

  .rd-forecast-kpi-card .rd-stat-value {
    font-size: var(--rd-text-xl);
  }

  .rd-forecast-drill-card,
  .rd-forecast-drill-link,
  .rd-link-subtle {
    color: inherit;
    text-decoration: none;
  }

  .rd-link-subtle {
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
    font-weight: 700;
  }

  .rd-forecast-drill-card:hover,
  .rd-forecast-drill-link:hover,
  .rd-link-subtle:hover {
    color: var(--rd-accent);
  }

  .rd-forecast-drill-card:hover {
    border-color: color-mix(in oklch, var(--rd-accent) 45%, var(--rd-border));
    background: var(--rd-accent-soft);
  }

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

  .rd-forecast-detail-context {
    display: flex;
    gap: var(--rd-sp-2);
    align-items: center;
    flex-wrap: wrap;
  }

  .rd-forecast-detail-category {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .rd-forecast-category-dot {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    margin-inline-end: var(--rd-sp-2);
    border: 1px solid var(--rd-border-strong);
    vertical-align: -1px;
  }

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

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

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

  .rd-forecast-quarter-metrics dd {
    margin: 0;
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-lg);
  }

  .rd-forecast-category-breakdown {
    display: grid;
    gap: var(--rd-sp-2);
    margin-block-start: var(--rd-sp-3);
  }

  .rd-forecast-category-breakdown > div {
    display: flex;
    justify-content: space-between;
    gap: var(--rd-sp-3);
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
  }

  .rd-forecast-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .rd-forecast-monthly-matrix {
    min-inline-size: 980px;
  }

  .rd-forecast-monthly-simple {
    min-inline-size: 720px;
  }

  .rd-forecast-category-head {
    text-align: center;
    border-inline-start: 1px solid var(--rd-border);
  }

  .rd-select-multiple {
    min-block-size: 8rem;
  }

  .rd-forecast-change-groups,
  .rd-forecast-change-group,
  .rd-forecast-audit-history {
    display: grid;
    gap: var(--rd-sp-3);
  }

  .rd-forecast-change-group h3 {
    margin: 0;
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .rd-forecast-change-card {
    display: grid;
    gap: var(--rd-sp-3);
    padding: var(--rd-sp-3);
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
  }

  .rd-forecast-change-card .audit-event {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .rd-forecast-quarter-movement-card,
  .rd-forecast-contributors-card {
    margin-block-end: 0;
  }

  .rd-forecast-quarter-movement-table tbody th {
    padding: 13px 14px;
    border-bottom: 1px solid var(--rd-border);
    color: var(--rd-fg);
    font-weight: 650;
    vertical-align: top;
    white-space: nowrap;
  }

  .rd-forecast-quarter-movement-table tbody tr:last-child th {
    border-bottom: 0;
  }

  .rd-forecast-quarter-movement-table th:first-child,
  .rd-forecast-contributors-table th:first-child,
  .rd-forecast-contributors-table td:first-child {
    text-align: left;
  }

  .rd-forecast-quarter-movement-table td,
  .rd-forecast-contributors-table td {
    vertical-align: top;
  }

  .rd-forecast-quarter-movement-table strong,
  .rd-forecast-contributors-table strong {
    display: block;
    font-family: var(--rd-font-mono);
  }

  .rd-forecast-quarter-movement-table span,
  .rd-forecast-contributors-table span {
    display: block;
    margin-block-start: 0.15rem;
  }

  .rd-forecast-cell-delta {
    font-family: var(--rd-font-mono);
    font-size: var(--rd-text-xs);
  }

  @media (max-width: 1100px) {
    .rd-forecast-quarter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-forecast-form-grid,
    .rd-forecast-stage-field,
    .rd-forecast-form-layout,
    .rd-forecast-kpi-grid,
    .rd-forecast-detail-summary {
      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-quarter-grid,
    .rd-forecast-control-card {
      grid-template-columns: 1fr;
    }

    .rd-forecast-mode-selector,
    .rd-forecast-past-open-head {
      align-items: stretch;
      flex-direction: column;
    }

    .rd-forecast-past-open-list li {
      grid-template-columns: 1fr;
      gap: var(--rd-sp-1);
    }

    .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-def-list {
      grid-template-columns: 1fr;
    }

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