/* Planning grid — dense, sticky, paper-on-paper. Stays in the FOATT token system. */

.foatt-main-inner--wide {
  max-width: none;
}

/* The wrapper is just a vertical layout container. The formula bar and the
   grid each get their own panel chrome below so they read as two surfaces
   separated by the page background — not a single slab with a white stripe
   under the formula bar. */
.foatt-plan-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Excel-style multi-cell selection stats. Sits below the grid panel and
   only shows when 2+ cells are selected with at least one numeric value.
   Right-aligned so it doesn't crowd the grid; its own panel chrome so it
   reads as a status surface, not a row of the grid. */
.foatt-plan-stats {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--foatt-mono);
  font-size: 11.5px;
  color: var(--foatt-text-subtle);
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.foatt-plan-stats-label {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--foatt-text-faint);
}

.foatt-plan-stats-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foatt-text);
}

.foatt-plan-stats-divider {
  color: var(--foatt-text-faint);
}

/* Right-click context menu for the grid. Floating, viewport-positioned by
   the controller. Items match the dropdown look so the menu reads as
   "the same kind of thing" as the plan / dim / data dropdowns elsewhere. */
.foatt-grid-context-menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  padding: 4px 0;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  font-size: 12.5px;
}

.foatt-grid-context-menu.hidden { display: none; }

.foatt-grid-context-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  color: var(--foatt-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.foatt-grid-context-menu-item:hover:not(:disabled) {
  background: var(--foatt-bg-soft);
}

.foatt-grid-context-menu-item:disabled {
  color: var(--foatt-text-faint);
  cursor: not-allowed;
}

.foatt-grid-context-menu-item:disabled svg {
  opacity: 0.5;
}

.foatt-grid-context-menu-item svg {
  color: var(--foatt-text-faint);
  flex: 0 0 auto;
}

.foatt-grid-context-menu-item:hover svg {
  color: var(--foatt-text-subtle);
}

.foatt-grid-context-menu-divider {
  height: 1px;
  background: var(--foatt-border-soft);
  margin: 4px 0;
}

.foatt-plan-grid {
  width: 100%;
  max-height: calc(100vh - 200px);
  overflow: auto;
  position: relative;
  font-size: 13px;
  color: var(--foatt-text);
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Formula bar — its own panel above the grid, matching the grid's chrome. */
.foatt-plan-formula-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  height: 38px;
}

.foatt-plan-formula-fx {
  font-family: var(--foatt-mono);
  font-size: 12px;
  font-style: italic;
  color: var(--foatt-text-faint);
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}

.foatt-plan-formula-address {
  font-size: 11px;
  font-weight: 600;
  color: var(--foatt-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 260px;
  width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--foatt-border-soft);
  padding-right: 12px;
}

/* In-flight batch save: cursor swaps to "progress" everywhere on the
   page, affected cells get a subtle pending wash, and the formula
   bar's address slot temporarily shows a spinner pill ("Filling 22
   cells…"). All three cues remove on response. */
body.is-batch-saving,
body.is-batch-saving * {
  cursor: progress !important;
}

.foatt-plan-cell-value.is-batch-pending {
  /* Soft animated dim that doesn't fight selection / actives. Picks up
     a slight blue tint so the user can see which cells are being
     processed even on a multi-row fill. */
  position: relative;
}
.foatt-plan-cell-value.is-batch-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--foatt-accent-soft);
  opacity: 0.45;
  animation: foatt-batch-pending-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes foatt-batch-pending-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}

.foatt-batch-pending-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--foatt-accent);
  background: var(--foatt-accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.foatt-batch-pending-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--foatt-accent-soft);
  border-top-color: var(--foatt-accent);
  border-radius: 50%;
  animation: foatt-batch-pending-spin 0.7s linear infinite;
}
@keyframes foatt-batch-pending-spin {
  to { transform: rotate(360deg); }
}

.foatt-plan-formula-input {
  flex: 1 1 auto;
  border: 1px solid var(--foatt-border);
  outline: 0;
  background: var(--foatt-surface);
  font-family: var(--foatt-mono);
  font-size: 13px;
  color: var(--foatt-text);
  padding: 4px 6px;
  border-radius: 4px;
}

.foatt-plan-formula-input:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--foatt-accent);
}

.foatt-plan-formula-input:disabled {
  color: var(--foatt-text-faint);
  cursor: not-allowed;
}

.foatt-plan-formula-history-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  color: var(--foatt-text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out;
}

.foatt-plan-formula-history-btn:hover:not(:disabled) {
  background: var(--foatt-surface-alt);
  color: var(--foatt-text);
}

.foatt-plan-formula-history-btn:disabled {
  color: var(--foatt-text-faint);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Note button uses amber accent when the active cell already has a note,
   so the user can tell at a glance there's something to read. */
.foatt-plan-formula-note-btn.has-note:not(:disabled) {
  background: var(--foatt-amber-soft);
  border-color: var(--foatt-amber-edge);
  color: var(--foatt-amber);
}

/* Briefly green-tinted "Copied" confirmation flashed on the share button
   (and matching context-menu item) after copyLink writes to the clipboard.
   Class is added by plan_grid_controller#flashCopyButton for ~1.4s. */
.foatt-plan-formula-history-btn.is-copied {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent-edge);
  color: var(--foatt-accent-text);
}

/* Formula popover (Notion-style picker on `=`) */
.foatt-formula-popover {
  position: fixed;
  z-index: 200;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 0;
  font-size: 13px;
  /* Transparent to clicks on background / gaps so click-to-reference still
     works on cells beneath the popover. Visible inner content opts back
     in via the pointer-events list below. */
  pointer-events: none;
}

.foatt-formula-popover.hidden { display: none; }

/* Every visible piece inside the popover opts back into pointer events.
   The container itself stays click-through so the narrow margins outside
   the content don't block cells underneath (the click-to-reference
   feature relies on that). Without this, clicks on section headers,
   the hint card, the footer, or padding fell through to the grid and
   closed the popover instead of selecting the item below. */
.foatt-formula-popover-item,
.foatt-formula-popover-section,
.foatt-formula-popover-hint,
.foatt-formula-popover-empty,
.foatt-formula-popover-footer {
  pointer-events: auto;
}

/* Inline ScreenTip card pinned at the top of the popover, like Excel's
   function-arg hint. Strong-weighted span marks the current arg. */
.foatt-formula-popover-hint {
  padding: 8px 12px;
  border-bottom: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
  font-family: var(--foatt-mono);
  font-size: 11.5px;
  color: var(--foatt-text);
}

.foatt-formula-popover-hint-fn {
  font-weight: 700;
  color: var(--foatt-accent);
}

.foatt-formula-popover-hint-desc {
  margin-top: 4px;
  font-family: inherit;
  font-size: 11px;
  color: var(--foatt-text-muted);
  line-height: 1.45;
}

.foatt-formula-popover-hint-desc kbd,
.foatt-formula-popover-hint-desc code {
  font-family: var(--foatt-mono);
  font-size: 10px;
  padding: 0 4px;
  margin: 0 1px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 3px;
  color: var(--foatt-text);
}

.foatt-formula-popover-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--foatt-text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--foatt-surface-alt);
  border-bottom: 1px solid var(--foatt-border-soft);
}

.foatt-formula-popover-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-formula-popover-item:last-child { border-bottom: 0; }

.foatt-formula-popover-item.is-active {
  background: var(--foatt-accent-soft);
}

.foatt-formula-popover-label {
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--foatt-text);
}

.foatt-formula-popover-desc {
  flex: 1 1 auto;
  font-size: 11px;
  color: var(--foatt-text-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foatt-formula-popover-empty {
  padding: 14px 12px;
  color: var(--foatt-text-muted);
  font-size: 12px;
  text-align: center;
}

.foatt-formula-popover-footer {
  position: sticky;
  bottom: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface);
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.foatt-formula-popover-footer kbd {
  font-family: var(--foatt-mono);
  font-size: 10px;
  padding: 0 4px;
  margin-right: 2px;
  background: var(--foatt-surface-alt);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 3px;
  color: var(--foatt-text-muted);
}

.foatt-formula-popover-builder-link {
  margin-left: auto;
  pointer-events: auto;
  background: none;
  border: 1px solid var(--foatt-accent-soft);
  color: var(--foatt-accent);
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.foatt-formula-popover-builder-link:hover {
  background: var(--foatt-accent-soft);
}


/* History drawer */
.foatt-history-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  transition: background 180ms ease-out;
}

.foatt-history-drawer-scrim.is-open {
  background: rgba(15, 23, 42, 0.18);
}

.foatt-history-drawer-scrim.is-hidden {
  display: none;
}

/* Non-modal variant: side panel that lets clicks fall through to the page
   behind it, so the user can interact with the grid while the panel is
   open. Used by the what-if drawer where pinning inputs requires
   selecting cells in the grid below. */
.foatt-history-drawer-scrim.is-non-modal {
  pointer-events: none;
  background: transparent !important;
}

.foatt-history-drawer-scrim.is-non-modal > .foatt-history-drawer {
  pointer-events: auto;
}

/* Reflow the page when the what-if drawer is open: shrink the main
   content area by the drawer's width so the grid is fully visible
   alongside the panel rather than being overlaid by it. */
body.has-what-if-drawer .foatt-main {
  padding-right: 440px;
  transition: padding-right 180ms ease-out;
}


/* What-if scenario tab strip */
.foatt-what-if-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--foatt-border);
  flex-wrap: wrap;
  background: var(--foatt-paper);
}

.foatt-what-if-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--foatt-text-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
}

.foatt-what-if-tab:hover {
  color: var(--foatt-text);
}

.foatt-what-if-tab.is-active {
  color: var(--foatt-text);
  border-bottom-color: var(--foatt-accent);
  font-weight: 500;
}

.foatt-what-if-tab-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.foatt-what-if-tab-name {
  outline: none;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 4ch;
  padding: 0;
}

.foatt-what-if-tab-close,
.foatt-what-if-tab-fork {
  width: 16px; height: 16px;
  border: none; background: transparent;
  border-radius: 3px;
  color: var(--foatt-text-faint);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  visibility: hidden;
}

.foatt-what-if-tab.is-active .foatt-what-if-tab-close,
.foatt-what-if-tab.is-active .foatt-what-if-tab-fork,
.foatt-what-if-tab:hover .foatt-what-if-tab-close,
.foatt-what-if-tab:hover .foatt-what-if-tab-fork {
  visibility: visible;
}

.foatt-what-if-tab-close:hover,
.foatt-what-if-tab-fork:hover {
  background: var(--foatt-border-soft);
  color: var(--foatt-text);
}

.foatt-what-if-tab-add {
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--foatt-text-faint);
  font-size: 14px;
  font-weight: 500;
}

.foatt-what-if-tab-add:hover {
  color: var(--foatt-text);
}

/* ===== Compare mode =====
   In compare mode the drawer widens dramatically (to fit N scenario
   columns), the tab strip hides, and the body switches from the single-
   scenario stack to a matrix table. Re-toggle returns to single-tab. */
.foatt-history-drawer-scrim.is-non-modal.is-compare .foatt-history-drawer {
  width: min(1080px, 92vw);
  max-width: 92vw;
}

body.has-what-if-drawer-compare .foatt-main {
  padding-right: min(1100px, 94vw);
}

.foatt-what-if-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.foatt-what-if-compare-table th,
.foatt-what-if-compare-table td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--foatt-border-soft);
  white-space: nowrap;
}

.foatt-what-if-compare-table th:first-child,
.foatt-what-if-compare-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--foatt-paper);
  z-index: 1;
}

.foatt-what-if-compare-table thead th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--foatt-text-faint);
  border-bottom: 2px solid var(--foatt-border);
}

.foatt-what-if-compare-table td.is-numeric {
  font-family: 'JetBrains Mono', monospace;
}

.foatt-what-if-compare-delta {
  font-size: 11px;
  display: block;
}

.foatt-what-if-compare-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--foatt-text-faint);
  margin: 18px 0 8px;
}

.foatt-what-if-compare-section-label:first-child { margin-top: 0; }

.foatt-icon-btn.is-active {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
}

/* ===== Promote-to-plan modal =====
   Lives inside the drawer (position:absolute over the drawer's body)
   so its state can change from queued → running → complete without
   page navigation. Lighter chrome than the global modal pattern.

   Order matters: .hidden lives in foatt.css (loaded earlier) and is a
   1-class selector — same specificity as .foatt-what-if-promote-modal.
   Without the explicit override below, our `display: flex` here wins
   on source order and the modal stays visible on page load. */
.foatt-what-if-promote-modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foatt-what-if-promote-modal.hidden { display: none; }

/* Persistent list of plans promoted from the active scenario.
   Survives drawer close/open and page reloads — surfaced under
   "Promoted into" above the Inputs section. */
.foatt-what-if-derived-plans {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.foatt-what-if-derived-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  background: var(--foatt-paper);
}

.foatt-what-if-derived-plan-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--foatt-accent-text);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foatt-what-if-derived-plan-link:hover {
  text-decoration: underline;
}

.foatt-what-if-derived-plan-time {
  font-size: 11px;
  color: var(--foatt-text-faint);
}

.foatt-what-if-promote-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
}

.foatt-what-if-promote-modal-card {
  position: relative;
  width: min(420px, 92%);
  background: var(--foatt-surface);
  border-radius: 8px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .32);
  display: flex;
  flex-direction: column;
}

.foatt-what-if-promote-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--foatt-border);
}

.foatt-what-if-promote-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foatt-what-if-promote-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--foatt-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.foatt-what-if-promote-modal-error {
  font-size: 12px;
  color: var(--foatt-rose);
}

.foatt-what-if-promote-modal-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--foatt-text-faint);
}

.foatt-what-if-promote-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--foatt-border);
  border-top-color: var(--foatt-accent);
  border-radius: 50%;
  animation: foatt-spin 800ms linear infinite;
}

@keyframes foatt-spin {
  to { transform: rotate(360deg); }
}

/* ===== Tornado chart =====
   Three-column row: input label | horizontal bar area | impact value.
   Each row's bar spans from low-sweep to high-sweep with the baseline
   as the chart's vertical midline. */
.foatt-what-if-tornado-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.foatt-what-if-tornado-header,
.foatt-what-if-tornado-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.foatt-what-if-tornado-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--foatt-border-soft);
  height: 22px;
}

.foatt-what-if-tornado-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.foatt-what-if-tornado-bar-area {
  position: relative;
  height: 22px;
}

.foatt-what-if-tornado-axis {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--foatt-border);
}

.foatt-what-if-tornado-bar {
  position: absolute;
  top: 4px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--foatt-accent-edge, #c9d9cc);
}

.foatt-what-if-tornado-bar-end-low,
.foatt-what-if-tornado-bar-end-high {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--foatt-text-faint);
  padding: 0 4px;
  white-space: nowrap;
  pointer-events: none;
}

.foatt-what-if-tornado-bar-end-low  { transform: translate(-100%, -50%); }
.foatt-what-if-tornado-bar-end-high { transform: translateY(-50%); }

.foatt-what-if-tornado-impact {
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  font-weight: 500;
}

.foatt-history-drawer {
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  background: var(--foatt-surface);
  border-left: 1px solid var(--foatt-border);
  box-shadow: -16px 0 32px -12px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 180ms ease-out;
}

.foatt-history-drawer-scrim.is-open .foatt-history-drawer {
  transform: translateX(0);
}

.foatt-history-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--foatt-border);
}

/* Tabbed history drawer: header collapses to a close-only chrome row;
   title + subtitle move into a swappable titleblock below the tabs. */
.foatt-history-drawer.is-tabbed .foatt-history-drawer-header {
  padding: 10px 12px 0;
  border-bottom: 0;
  justify-content: flex-end;
  align-items: center;
}

.foatt-history-drawer-tabs {
  padding: 0 20px;
}

.foatt-history-drawer-tabs .foatt-tab[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.foatt-history-drawer-titleblock {
  padding: 12px 20px 4px;
}

.foatt-history-drawer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foatt-text);
}

.foatt-history-drawer-subtitle {
  font-size: 12px;
  color: var(--foatt-text-subtle);
  margin-top: 2px;
}

/* The `inner` wrapper sits between the flex-column drawer and the
   scrollable body. Without these declarations it'd collapse to content
   height, making `flex: 1; overflow-y: auto` on the body inert (its
   parent wouldn't be the flex container). Treat the wrapper as a
   passthrough flex column that fills remaining drawer height and clips
   so the body can scroll. */
[data-history-drawer-target="inner"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.foatt-history-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  min-height: 0;
}

.foatt-history-drawer-scrim.is-loading .foatt-history-drawer-body {
  opacity: 0.6;
  transition: opacity 80ms ease-out;
}

.foatt-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foatt-history-entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--foatt-border-soft);
}

.foatt-history-entry:last-child {
  border-bottom: 0;
}

.foatt-history-entry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--foatt-text-faint);
  margin-bottom: 6px;
}

.foatt-history-entry-when {
  font-family: var(--foatt-mono);
}

.foatt-history-entry-who {
  font-weight: 500;
  color: var(--foatt-text-subtle);
}

.foatt-history-entry-change {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--foatt-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.foatt-history-entry-from {
  color: var(--foatt-text-faint);
  text-decoration: line-through;
}

.foatt-history-entry-arrow {
  color: var(--foatt-text-faint);
}

.foatt-history-entry-to {
  color: var(--foatt-text);
  font-weight: 500;
}

.foatt-history-entry-status.is-error {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foatt-rose);
}

/* Sheet-history rows show which cell each revision belongs to. */
.foatt-history-entry-cell-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--foatt-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.foatt-history-entry-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* "Restore" / "Undo" / "Rollback" buttons. Outlined, neutral; light up
   on hover. The is-rollback variant skews amber to telegraph the
   broader, riskier scope. */
.foatt-history-entry-restore {
  margin-top: 8px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  color: var(--foatt-text-subtle);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out, border-color 80ms ease-out;
}

.foatt-history-entry-restore:hover {
  background: var(--foatt-amber-soft);
  border-color: var(--foatt-amber-edge);
  color: var(--foatt-amber);
}

/* Rollback variant — same look at rest, slightly stronger hover so the
   bigger blast radius feels distinct from a targeted undo. */
.foatt-history-entry-restore.is-rollback:hover {
  background: var(--foatt-rose-soft);
  border-color: var(--foatt-rose);
  color: var(--foatt-rose);
}

.foatt-history-group-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--foatt-text);
  margin: 4px 0;
}

.foatt-history-group-details {
  margin-top: 6px;
}

.foatt-history-group-details-toggle {
  font-size: 11px;
  color: var(--foatt-text-faint);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.foatt-history-group-details-toggle::before {
  content: "▸";
  font-size: 9px;
  transition: transform 80ms ease-out;
}

.foatt-history-group-details[open] .foatt-history-group-details-toggle::before {
  transform: rotate(90deg);
}

.foatt-history-group-cells {
  list-style: none;
  padding: 6px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.foatt-history-group-cells li {
  font-size: 11.5px;
  font-family: var(--foatt-mono);
  color: var(--foatt-text-subtle);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.foatt-history-group-cell-label {
  flex: 0 0 80px;
  color: var(--foatt-accent-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.foatt-history-locked-banner {
  margin: 12px 16px;
  padding: 10px 12px;
  background: var(--foatt-amber-soft);
  border: 1px solid var(--foatt-amber-edge);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--foatt-amber);
}

.foatt-history-empty {
  padding: 32px 12px;
  text-align: center;
}

.foatt-history-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--foatt-text);
  margin-bottom: 4px;
}

.foatt-history-empty-sub {
  font-size: 12px;
  color: var(--foatt-text-subtle);
}

/* ==== Trace shelf (precedents / dependents) ==== */
.foatt-trace-drawer-meta {
  font-size: 11px;
  color: var(--foatt-text-faint);
  margin-top: 2px;
}

.foatt-trace-summary {
  font-size: 11px;
  font-weight: 600;
  color: var(--foatt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px 6px;
}

.foatt-trace-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foatt-trace-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--foatt-border-soft);
  transition: background 80ms ease-out;
}

.foatt-trace-item:last-child {
  border-bottom: 0;
}

.foatt-trace-item:hover {
  background: var(--foatt-bg-soft);
}

.foatt-trace-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.foatt-trace-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--foatt-text);
}

.foatt-trace-item-num {
  font-family: var(--foatt-mono);
  font-size: 11.5px;
  color: var(--foatt-text-faint);
  flex: 0 0 auto;
}

.foatt-trace-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foatt-trace-item-dim {
  font-size: 11.5px;
  color: var(--foatt-text-subtle);
}

.foatt-trace-item-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--foatt-accent-text);
  background: var(--foatt-accent-soft);
  padding: 1px 6px;
  border-radius: 3px;
}

.foatt-trace-item-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--foatt-accent-text);
  text-decoration: none;
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--foatt-accent-edge);
}

.foatt-trace-item-go:hover {
  background: var(--foatt-accent-soft);
}

.foatt-trace-item-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--foatt-text-subtle);
}

.foatt-trace-item-period {
  font-family: var(--foatt-mono);
}

.foatt-trace-item-value {
  font-family: var(--foatt-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--foatt-text);
}

.foatt-trace-item-formula {
  font-family: var(--foatt-mono);
  font-size: 11px;
  color: var(--foatt-accent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foatt-plan-head,
.foatt-plan-row {
  display: grid;
  align-items: stretch;
  /* Without min-width, the grid container's box collapses to the parent's
     visible width while its tracks extend further. The result: cell
     border-rights (column dividers) paint with the cells but the
     container's border-bottom (row divider) stops at the visible edge.
     `max-content` forces the box to grow with the tracks so borders paint
     across the full row when horizontally scrolled. */
  min-width: max-content;
}

.foatt-plan-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--foatt-surface-alt);
  border-bottom: 1px solid var(--foatt-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--foatt-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.foatt-plan-head-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--foatt-border-soft);
  display: flex;
  align-items: center;
}

.foatt-plan-head-period {
  justify-content: flex-end;
  font-family: var(--foatt-mono);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Period headers are clickable: click to select the whole column, drag
   across to extend, shift-click to grow. */
.foatt-plan-head-selectable {
  cursor: pointer;
  user-select: none;
}

.foatt-plan-head-selectable:hover {
  background: var(--foatt-border-soft);
}

.foatt-plan-head-selectable.is-selected {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
}

/* `[A]` marker on month headers when the actuals overlay is showing that
   period as actuals. Small, accent-colored, sits to the right of the label. */
.foatt-plan-head-actual-tag {
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--foatt-accent-text);
}

.foatt-plan-head-period.is-actual {
  color: var(--foatt-accent-text);
}

/* Subtotal column header — distinct from regular month headers. Soft
   accent background telegraphs "summary, not data." Not selectable as
   a column (no role=button), so cursor stays default. */
.foatt-plan-head-subtotal {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Subtotal cell — read-only sum. Same accent-soft surface as the
   header so the column reads as one continuous summary stripe. */
.foatt-plan-cell-value.is-subtotal {
  background: var(--foatt-accent-soft);
}

.foatt-plan-cell-value.is-subtotal .foatt-plan-input {
  color: var(--foatt-accent-text);
  font-weight: 600;
  cursor: default;
}

.foatt-plan-cell-value.is-subtotal .foatt-plan-input:focus {
  background: var(--foatt-accent-soft);
  box-shadow: none;
}

/* Subtotal switches (Quarter / Year in the page header). Native-feeling
   toggles that read as on/off at a glance — accent track + slid knob
   when on, neutral when off. Whole element is clickable. */
.foatt-subtotal-switches {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 5px;
}

.foatt-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--foatt-text-subtle);
  cursor: pointer;
  transition: color 80ms ease-out;
}

.foatt-switch:hover                 { color: var(--foatt-text); }
.foatt-switch:hover .foatt-switch-track { background: var(--foatt-text-faint); }
.foatt-switch.is-on:hover .foatt-switch-track { background: var(--foatt-accent-text); }

/* Focus indicator lives on the track, not a generic outline around the
   wrapper — keeps the look clean while staying keyboard-accessible. */
.foatt-switch:focus { outline: none; }
.foatt-switch:focus-visible .foatt-switch-track {
  box-shadow: 0 0 0 2px var(--foatt-accent-edge);
}

.foatt-switch-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  user-select: none;
}

.foatt-switch-track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  background: var(--foatt-border);
  border-radius: 999px;
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
  flex: 0 0 auto;
}

.foatt-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--foatt-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 120ms ease-out, background 120ms ease-out;
}

.foatt-switch.is-on .foatt-switch-track {
  background: var(--foatt-accent);
}

.foatt-switch.is-on .foatt-switch-knob {
  transform: translateX(12px);
  background: var(--foatt-surface);
}

.foatt-switch.is-on .foatt-switch-label {
  color: var(--foatt-text);
}

/* Cutoff divider: a 2px accent line at the boundary between the last actuals
   column and the first plan column. Drawn with inset box-shadow so it
   doesn't take grid space (border-left would push the cell content).
   Excludes the Total column since it already has its own left border. */
.foatt-plan-head-period.is-actual + .foatt-plan-head-period:not(.is-actual):not(.foatt-plan-head-total),
.foatt-plan-cell-value.is-actual + .foatt-plan-cell-value:not(.is-actual) {
  box-shadow: inset 2px 0 0 var(--foatt-accent);
}

/* Active cell (focus ring) on the boundary: stack both shadows so the ring
   stays visible without erasing the divider. */
.foatt-plan-cell-value.is-actual + .foatt-plan-cell-value:not(.is-actual).is-active {
  box-shadow: inset 0 0 0 2px var(--foatt-accent), inset 2px 0 0 var(--foatt-accent);
}

.foatt-plan-head-account {
  position: sticky;
  left: 0;
  background: var(--foatt-surface-alt);
  z-index: 4;
}

.foatt-plan-head-total {
  background: var(--foatt-surface-alt);
  position: sticky;
  right: 0;
  z-index: 4;
  border-right: none;
  border-left: 1px solid var(--foatt-border);
}

.foatt-plan-row {
  border-bottom: 1px solid var(--foatt-border);
  background: var(--foatt-surface);
  transition: background 80ms ease-out;
}

.foatt-plan-row:hover {
  background: var(--foatt-surface-alt);
}

.foatt-plan-cell {
  border-right: 1px solid var(--foatt-border);
  padding: 0;
  height: 32px;
  display: flex;
  align-items: stretch;
  position: relative;
}

.foatt-plan-cell-account {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.foatt-plan-row:hover .foatt-plan-cell-account {
  background: var(--foatt-surface-alt);
}

.foatt-plan-account-num {
  font-family: var(--foatt-mono);
  font-size: 11.5px;
  color: var(--foatt-text-faint);
  flex: 0 0 auto;
}

.foatt-plan-account-name {
  font-weight: 500;
  color: var(--foatt-text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foatt-plan-account-tag {
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.foatt-plan-cell-value {
  background: var(--foatt-surface);
}

.foatt-plan-cell-value.is-empty {
  background: var(--foatt-surface);
}

.foatt-plan-cell-value.is-positive {
  color: var(--foatt-emerald);
}

.foatt-plan-cell-value.is-negative {
  color: var(--foatt-rose);
}

.foatt-plan-cell-value.is-zero {
  color: var(--foatt-text-faint);
}

.foatt-plan-cell-value.is-error,
.foatt-plan-cell-value.is-circular {
  background: var(--foatt-rose-soft);
  color: var(--foatt-rose);
}

.foatt-plan-cell-value.is-circular::before {
  content: "↻";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--foatt-rose);
  opacity: 0.7;
}

.foatt-plan-cell-value.is-error::before {
  content: "!";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--foatt-rose);
  opacity: 0.7;
}

/* Formula mark: tiny "fx" tag in the top-left corner so a glance tells you
   the cell is computed. Suppressed when the cell already paints an error
   indicator in that spot. */
.foatt-plan-cell-value.has-formula:not(.is-error):not(.is-circular)::before {
  content: "ƒ";
  position: absolute;
  top: 1px;
  left: 4px;
  font-family: var(--foatt-mono);
  font-size: 9.5px;
  font-style: italic;
  font-weight: 700;
  color: var(--foatt-accent);
  opacity: 0.7;
  pointer-events: none;
  line-height: 1;
}

/* Cell-note indicator: amber triangle in the top-right corner.
   The cell has a tooltip via the title attribute showing the note text. */
.foatt-plan-cell-value.has-note::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--foatt-amber) transparent transparent;
  pointer-events: none;
  z-index: 1;
}

/* Selection state (mouse drag, shift-click, keyboard extend).
   Selection cells get an accent fill; the active cell within the selection
   gets a forest-accent ring identical to the input focus treatment so the
   transition into edit mode is seamless. */
.foatt-plan-cell-value.is-selected {
  background: var(--foatt-accent-soft);
}

.foatt-plan-cell-value.is-selected.is-positive { color: var(--foatt-emerald); }
.foatt-plan-cell-value.is-selected.is-negative { color: var(--foatt-rose); }

.foatt-plan-cell-value.is-active {
  box-shadow: inset 0 0 0 2px var(--foatt-accent);
  background: var(--foatt-surface);
  z-index: 1;
}

/* Subtotal / grouping / total cells now participate in the same
   selection model as editable cells: clicking them sets the active
   cell, range selection includes them, copy serializes their values.
   They stay read-only — no input element, paste/fill skips them. */
.foatt-plan-cell-subtotal-value.is-selected,
.foatt-plan-cell-total.is-selected {
  background: var(--foatt-accent-soft);
}

.foatt-plan-cell-subtotal-value.is-active,
.foatt-plan-cell-total.is-active {
  box-shadow: inset 0 0 0 2px var(--foatt-accent);
  z-index: 1;
}

/* Fill handle — the small square that lives on the bottom-right corner
   of the active selection. Mousedown + drag extends the selection along
   one axis to fill values across the dragged range (Excel/Sheets parity).
   Positioned absolutely inside .foatt-plan-grid (which is position:relative)
   so it scrolls with the grid content. */
.foatt-fill-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--foatt-accent);
  border: 1.5px solid var(--foatt-surface);
  border-radius: 1px;
  cursor: crosshair;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.foatt-fill-handle:hover {
  transform: scale(1.15);
}

/* Fill-preview cells — the cells that would be filled if the user
   released the drag right now. Same accent fill as selection but with
   a dashed ring so the user can tell apart "currently selected" from
   "about to be filled". */
.foatt-plan-cell-value.is-fill-preview {
  background: var(--foatt-accent-soft);
  outline: 1px dashed var(--foatt-accent);
  outline-offset: -2px;
}

/* Deep-link arrival pulse — applied for ~2.2s when the controller restores
   selection from `?cell=<id>` or after the user copies a share link. The
   ring layers on top of the active-cell ring; the animation auto-decays
   without leaving a residual style. */
@keyframes foatt-deeplink-pulse {
  0%   { box-shadow: 0 0 0 0 var(--foatt-accent), inset 0 0 0 2px var(--foatt-accent); }
  40%  { box-shadow: 0 0 0 6px transparent,        inset 0 0 0 2px var(--foatt-accent); }
  100% { box-shadow: 0 0 0 0 transparent,          inset 0 0 0 2px var(--foatt-accent); }
}

.foatt-plan-cell-value.is-deeplink-target {
  animation: foatt-deeplink-pulse 2.2s ease-out 0s 2;
  z-index: 2;
}

.foatt-plan-grid:focus { outline: none; }
.foatt-plan-grid:focus-visible { outline: none; }

.foatt-plan-input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
  padding: 0 12px;
  font-family: var(--foatt-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: inherit;
  letter-spacing: -0.2px;
}

.foatt-plan-input:focus {
  background: var(--foatt-accent-soft);
  box-shadow: inset 0 0 0 2px var(--foatt-accent);
  color: var(--foatt-text);
}

/* Expand-while-editing: long formulas overflow the cell to the right while
   the user is typing, so they can see the whole expression before commit. */
.foatt-plan-input.is-expanded {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 50;
  background: var(--foatt-surface);
  text-align: left;
  padding: 0 10px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--foatt-accent),
              0 8px 24px rgba(15, 23, 42, 0.12);
}

.foatt-plan-cell-total {
  position: sticky;
  right: 0;
  background: var(--foatt-surface-alt);
  border-right: none;
  border-left: 1px solid var(--foatt-border);
  font-family: var(--foatt-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.2px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.foatt-plan-cell-total.is-positive { color: var(--foatt-emerald); }
.foatt-plan-cell-total.is-negative { color: var(--foatt-rose); }
.foatt-plan-cell-total.is-zero     { color: var(--foatt-text-faint); }

.foatt-plan-row:hover .foatt-plan-cell-total {
  background: var(--foatt-bg-soft);
}

/* Lock-cursor SVG used for non-editable cells (actuals + rollup read-only).
   White-filled lock with the accent stroke so it reads on the white cell
   surface. Hotspot at (10,12) — center of the body. Falls back to
   `not-allowed` on browsers that drop the data-URI. */
.foatt-plan-cell-value.is-readonly {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><rect x='3.5' y='10' width='13' height='10' rx='1.5' fill='%23ffffff' stroke='%23234a30' stroke-width='1.5'/><path d='M6.5 10V6.5a3.5 3.5 0 0 1 7 0V10' fill='none' stroke='%23234a30' stroke-width='1.5' stroke-linecap='round'/></svg>") 10 12,
    not-allowed;
}

/* ==== Forecast blend (cells before cutoff are actuals, read-only) ==== */
/* Actuals overlay cells: keep the editable surface (white) so the row
   reads as one continuous strip. The faded text + lock cursor signal
   non-editability instead of a darker background. */
.foatt-plan-cell-value.is-actual .foatt-plan-input {
  color: var(--foatt-text-faint);
  cursor: inherit;
}

.foatt-plan-cell-value.is-actual.is-positive .foatt-plan-input,
.foatt-plan-cell-value.is-actual.is-negative .foatt-plan-input {
  color: var(--foatt-text-subtle);
}

.foatt-plan-cell-value.is-actual .foatt-plan-input:focus {
  box-shadow: none;
}

/* Read-only budget cells (rollup view of a multi-dim org, locked plan).
   Same treatment as actuals: white surface, faded text, lock cursor. */
.foatt-plan-cell-value.is-readonly:not(.is-actual) .foatt-plan-input {
  color: var(--foatt-text-faint);
  cursor: inherit;
}

.foatt-plan-cell-value.is-readonly:not(.is-actual).is-positive .foatt-plan-input,
.foatt-plan-cell-value.is-readonly:not(.is-actual).is-negative .foatt-plan-input {
  color: var(--foatt-text-subtle);
}

.foatt-plan-cell-value.is-readonly:not(.is-actual) .foatt-plan-input:focus {
  box-shadow: none;
}

/* ==== Actuals workspace ==== */
.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value {
  background: var(--foatt-surface-alt);
}

.foatt-actuals-wrapper.is-readonly .foatt-plan-input {
  color: var(--foatt-text-faint);
  cursor: default;
}

.foatt-actuals-wrapper.is-readonly .foatt-plan-input:focus {
  background: var(--foatt-surface-alt);
  box-shadow: none;
}

/* In actuals read mode, the wrapper-level background rule above (3-class
   specificity) was beating `.is-selected`/`.is-active` (2-class), so cells
   never visibly highlighted on click. Re-stamp the selection styles with
   matching specificity so the user can still see what they're on. */
.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value.is-selected {
  background: var(--foatt-accent-soft);
}

.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value.is-active {
  box-shadow: inset 0 0 0 2px var(--foatt-accent);
  background: var(--foatt-surface);
  z-index: 1;
}

.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value.is-positive,
.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value.is-negative,
.foatt-actuals-wrapper.is-readonly .foatt-plan-cell-value.is-zero {
  /* in read-only mode, all numbers grayed regardless of sign */
}

.foatt-actuals-wrapper.is-readonly .foatt-plan-input {
  color: var(--foatt-text-subtle) !important;
}

/* When the user clicks "Highlight manual entries" in the actuals
   banner, body gets the .manual-highlight-active class. We pulse a
   stronger amber outline + background on every manual cell so it's
   immediately obvious which cells the integration won't overwrite.
   The grid renders manual cells with `.foatt-plan-cell-value.is-manual`
   (see app/views/shared/grid/_cell.html.erb). */
body.manual-highlight-active .foatt-plan-cell-value.is-manual {
  background: var(--foatt-amber-soft);
  outline: 2px solid var(--foatt-amber);
  outline-offset: -2px;
  animation: foatt-manual-pulse 1.6s ease-in-out 2;
}

@keyframes foatt-manual-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35); }
}

.foatt-actuals-source-tag {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--foatt-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--foatt-amber);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ==== Drivers section: collapsible editable panel below the grid ==== */
.foatt-drivers-section {
  margin-top: 16px;
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  background: var(--foatt-surface);
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.foatt-drivers-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  background: var(--foatt-surface-alt);
  border-bottom: 1px solid var(--foatt-border-soft);
}

.foatt-drivers-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: -6px;
  cursor: pointer;
  color: var(--foatt-text);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 4px;
}

.foatt-drivers-section-toggle:hover {
  background: var(--foatt-border-soft);
}

.foatt-drivers-section-caret {
  color: var(--foatt-text-muted);
  transition: transform 120ms ease-out;
}

.foatt-drivers-section-caret.is-collapsed {
  transform: rotate(-90deg);
}

.foatt-drivers-section-title {
  letter-spacing: 0.02em;
}

.foatt-drivers-section-count {
  font-family: var(--foatt-mono);
  font-size: 10.5px;
  color: var(--foatt-text-faint);
  background: var(--foatt-border-soft);
  padding: 1px 6px;
  border-radius: 3px;
}

.foatt-drivers-section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.foatt-drivers-section-add-input {
  width: 180px;
  height: 26px;
  padding: 4px 10px;
  font-size: 12px;
}

.foatt-drivers-section-manage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--foatt-text-muted);
  text-decoration: none;
}

.foatt-drivers-section-manage:hover {
  color: var(--foatt-accent);
}

.foatt-drivers-section-body.hidden {
  display: none;
}

.foatt-drivers-section-grid {
  outline: 0;
  /* Strip its own horizontal scroller — the JS sync mirrors scrollLeft from
     the main grid so columns stay aligned. */
  overflow-x: auto;
}

.foatt-drivers-section-empty {
  padding: 16px 14px;
  color: var(--foatt-text-muted);
  font-size: 12.5px;
}

/* Small backspace-style "clear values" affordance on driver rows. Only
   renders for unlocked plans. Toned-down — clears cell values, doesn't
   delete the driver itself. */
.foatt-plan-row-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--foatt-text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, color 120ms, background 120ms;
}

.foatt-plan-row:hover .foatt-plan-row-clear {
  opacity: 1;
}

.foatt-plan-row-clear:hover {
  color: var(--foatt-text);
  background: var(--foatt-border-soft);
}

/* Settings gear next to the DRIVER tag — same chrome as the clear
   button. Shows on row hover; click opens the driver-settings modal. */
.foatt-plan-row-driver-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--foatt-text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, color 120ms, background 120ms;
}

.foatt-plan-row:hover .foatt-plan-row-driver-settings,
.foatt-plan-row-driver-settings:focus {
  opacity: 1;
}

.foatt-plan-row-driver-settings:hover {
  color: var(--foatt-text);
  background: var(--foatt-border-soft);
}

/* ==== Breakdown view total row ==== */
.foatt-breakdown-total-row {
  background: var(--foatt-surface-alt);
  border-top: 2px solid var(--foatt-border);
  font-weight: 700;
}

.foatt-breakdown-total-row .foatt-plan-cell-account {
  background: var(--foatt-surface-alt);
}

/* ==== Income-statement section subtotal rows ==== */
/* Bold, slightly tinted, non-editable. Row dispatch puts these between
   sections (Total Revenue / Gross Profit / Operating Income / Net Income).
   They sit inside the same grid as account rows so column widths line up. */
.foatt-plan-row-subtotal {
  background: var(--foatt-surface-alt);
  border-top: 1px solid var(--foatt-border);
  border-bottom: 2px solid var(--foatt-border);
  font-weight: 600;
}

.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-label {
  font-weight: 700;
  color: var(--foatt-text);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-value {
  font-weight: 600;
  cursor: default;
  user-select: text;
}

.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-value.is-positive {
  color: var(--foatt-emerald);
}

.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-value.is-negative {
  color: var(--foatt-rose);
}

.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-value.is-zero {
  color: var(--foatt-text-faint);
}

.foatt-plan-row-subtotal:hover {
  background: var(--foatt-surface-alt);
}

/* ==== Account name as drill-down link ==== */
.foatt-plan-account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  flex: 1 1 auto;
  min-width: 0;
  transition: background 80ms ease-out;
}

.foatt-plan-account-link:hover {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
}

.foatt-plan-account-link .foatt-plan-account-num {
  flex: 0 0 auto;
}

.foatt-plan-account-link .foatt-plan-account-name {
  flex: 1 1 auto;
  min-width: 0;
}

.foatt-plan-account-chevron {
  flex: 0 0 auto;
  color: var(--foatt-text-faint);
  opacity: 0;
  transition: opacity 80ms ease-out, color 80ms ease-out;
}

.foatt-plan-row:hover .foatt-plan-account-chevron,
.foatt-plan-account-link:hover .foatt-plan-account-chevron,
.foatt-plan-account-link:focus .foatt-plan-account-chevron {
  opacity: 1;
  color: var(--foatt-accent-text);
}

/* ==== Inline drill-down: chevron button on parent row ==== */
.foatt-plan-chevron-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--foatt-text-muted);
  transition: background 80ms ease-out;
}

.foatt-plan-chevron-btn:hover {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
}

.foatt-plan-chevron {
  transition: transform 140ms ease-out;
}

.foatt-plan-chevron-btn.is-expanded .foatt-plan-chevron {
  transform: rotate(90deg);
}

.foatt-plan-chevron-spacer {
  flex: 0 0 auto;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 2px;
}

.foatt-plan-drilldown-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--foatt-accent-text);
  flex: 0 0 auto;
}

/* Parent rows of expanded drill-downs get a stronger background */
.foatt-plan-row-drilldown:hover {
  background: var(--foatt-accent-soft);
}

/* Frame for inline child rows */
.foatt-plan-drilldown-frame {
  display: contents; /* frame doesn't add wrapper layout */
}

/* Indented child rows in inline expansion */
.foatt-breakdown-child-row {
  background: var(--foatt-surface-alt);
}

/* Unallocated row sits at the top of every breakdown — italics + faint
   to signal "this is the catch-all" without making it noisy. */
.foatt-breakdown-unallocated-row {
  background: var(--foatt-surface);
  border-bottom: 1px dashed var(--foatt-border);
}

.foatt-breakdown-unallocated-row .foatt-plan-cell-account,
.foatt-breakdown-unallocated-row .foatt-plan-cell-value,
.foatt-breakdown-unallocated-row .foatt-plan-cell-total {
  background: var(--foatt-surface);
}

.foatt-breakdown-unallocated-row .foatt-plan-account-tag {
  font-size: 9.5px;
  color: var(--foatt-text-faint);
}

.foatt-breakdown-child-row .foatt-plan-cell-account {
  padding-left: 38px; /* indent past the chevron column */
  background: var(--foatt-surface-alt);
}

.foatt-breakdown-child-row .foatt-plan-account-num {
  color: var(--foatt-accent-text);
}

.foatt-breakdown-child-row .foatt-plan-cell-value {
  background: var(--foatt-surface-alt);
}

.foatt-breakdown-child-row .foatt-plan-cell-total {
  background: var(--foatt-bg-soft);
}

/* Add-dimension inline form row */
.foatt-breakdown-add-row {
  background: var(--foatt-surface-alt);
}

.foatt-breakdown-add-row .foatt-plan-cell-account {
  padding-left: 38px;
  background: var(--foatt-surface-alt);
}

.foatt-breakdown-add-form {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

.foatt-breakdown-add-form input,
.foatt-breakdown-add-form select {
  margin: 0;
}

.foatt-breakdown-footer-row {
  background: var(--foatt-surface);
  border-bottom: 2px solid var(--foatt-border);
}

.foatt-breakdown-footer-row .foatt-plan-cell-account {
  padding-left: 38px;
  background: var(--foatt-surface);
}

/* ==== Locked plan badge in subtitle ==== */
.foatt-plan-lock-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--foatt-amber-soft);
  color: var(--foatt-amber);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--foatt-amber-edge);
}

/* ==== Plan switcher (dropdown on the page title) ==== */
.foatt-plan-switcher {
  position: relative;
}

.foatt-plan-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: -4px -8px 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 80ms ease-out;
}

.foatt-plan-switcher-trigger:hover {
  background: var(--foatt-surface-alt);
}

.foatt-plan-switcher-trigger .foatt-page-title {
  margin: 0;
}

.foatt-plan-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
  z-index: 30;
  overflow: hidden;
  padding: 6px;
}

.foatt-plan-switcher-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foatt-text-faint);
  padding: 6px 8px 4px;
}

.foatt-plan-switcher-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--foatt-text);
  transition: background 80ms ease-out;
}

.foatt-plan-switcher-item:hover {
  background: var(--foatt-surface-alt);
}

.foatt-plan-switcher-item-name {
  font-size: 13px;
  font-weight: 500;
}

.foatt-plan-switcher-item-meta {
  font-size: 11px;
  color: var(--foatt-text-subtle);
}

.foatt-plan-switcher-item-link {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--foatt-text-muted);
}

.foatt-plan-switcher-divider {
  height: 1px;
  background: var(--foatt-border-soft);
  margin: 4px 4px;
}

.foatt-plan-switcher-search {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--foatt-text);
  outline: 0;
  border-radius: 8px 8px 0 0;
  margin: -6px -6px 6px;
  width: calc(100% + 12px);
}

.foatt-plan-switcher-search::placeholder {
  color: var(--foatt-text-faint);
}

.foatt-plan-switcher-empty {
  padding: 16px 10px;
  font-size: 12px;
  color: var(--foatt-text-faint);
  text-align: center;
}

.foatt-plan-switcher-item.is-keyboard-active {
  background: var(--foatt-accent-soft);
  color: var(--foatt-accent-text);
}

/* Override our flex display when filterable_dropdown applies .hidden. */
.foatt-plan-switcher-item.hidden {
  display: none !important;
}

/* ==== View-mode toggle (Budget / Variance segmented control) ==== */
.foatt-plan-view-toggle {
  display: inline-flex;
  background: var(--foatt-surface-alt);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.foatt-plan-view-toggle-item {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--foatt-text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 80ms ease-out, color 80ms ease-out;
}

.foatt-plan-view-toggle-item:hover {
  color: var(--foatt-text);
}

.foatt-plan-view-toggle-item.is-active {
  background: var(--foatt-surface);
  color: var(--foatt-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ==== Variance grid (read-only, 3 sub-cols per period) ==== */
.foatt-variance-grid {
  font-size: 12px;
}

.foatt-variance-head-top {
  height: 28px;
  border-bottom: 1px solid var(--foatt-border-soft);
  z-index: 5;
}

.foatt-variance-head-sub {
  position: sticky;
  top: 28px;
  z-index: 4;
  background: var(--foatt-surface-alt);
  border-bottom: 1px solid var(--foatt-border);
  font-size: 10px;
  height: 24px;
}

.foatt-variance-period-group {
  justify-content: center;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--foatt-mono);
  border-right: 1px solid var(--foatt-border);
}

.foatt-variance-total-group {
  background: var(--foatt-surface-alt);
  position: sticky;
  right: 0;
  z-index: 6;
  border-left: 1px solid var(--foatt-border);
}

.foatt-variance-sub-cell {
  padding: 4px 8px;
  justify-content: flex-end;
  font-family: var(--foatt-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foatt-text-faint);
}

.foatt-variance-sub-bud { background: var(--foatt-surface-alt); }
.foatt-variance-sub-act { background: var(--foatt-surface-alt); }
.foatt-variance-sub-var { background: var(--foatt-surface-alt); border-right: 1px solid var(--foatt-border); }

.foatt-variance-cell {
  font-family: var(--foatt-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: -0.2px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
}

.foatt-variance-cell-bud { background: var(--foatt-surface); color: var(--foatt-text-muted); }
.foatt-variance-cell-act { background: var(--foatt-surface); color: var(--foatt-text); font-weight: 500; }
.foatt-variance-cell-var {
  background: var(--foatt-surface);
  border-right: 1px solid var(--foatt-border-soft);
  font-weight: 600;
}

.foatt-variance-cell-var.is-positive { color: var(--foatt-emerald); }
.foatt-variance-cell-var.is-negative { color: var(--foatt-rose); }
.foatt-variance-cell-var.is-zero,
.foatt-variance-cell-var.is-empty { color: var(--foatt-text-faint); }

.foatt-variance-cell-total {
  background: var(--foatt-surface-alt);
  font-weight: 700;
  position: sticky;
  border-left: 0;
}

/* The first total cell needs the divider against the last period's var-col */
.foatt-variance-cell.foatt-variance-cell-bud.foatt-variance-cell-total {
  border-left: 1px solid var(--foatt-border);
}

/* ===== Custom grouping rows + modal ===== */

.foatt-plan-row-grouping .foatt-grouping-link:hover {
  text-decoration: underline !important;
}

.foatt-grouping-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 24px 24px;
}
.foatt-grouping-modal.hidden { display: none; }

.foatt-grouping-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}

.foatt-grouping-modal-dialog {
  position: relative;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 84px);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.foatt-grouping-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--foatt-border-soft);
  position: relative;
}
.foatt-grouping-modal-header h2 {
  font-size: 16px; font-weight: 700; margin: 0; color: var(--foatt-text);
}
.foatt-grouping-modal-subtitle {
  font-size: 12px; color: var(--foatt-text-muted); margin: 2px 0 0;
}
.foatt-grouping-modal-position {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--foatt-text-muted); margin: 2px 0 0;
}
.foatt-grouping-modal-position-label {
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px;
}
.foatt-grouping-modal-position-value {
  color: var(--foatt-text); font-weight: 500;
}
.foatt-grouping-modal-position-edit {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--foatt-accent); font-size: 12px;
  text-decoration: underline; text-underline-offset: 2px;
}
.foatt-grouping-modal-position-edit:hover { color: var(--foatt-text); }

.foatt-grouping-position-picker {
  margin-top: 8px;
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  background: var(--foatt-surface-alt);
  padding: 8px;
}
.foatt-grouping-position-picker.hidden { display: none; }
.foatt-grouping-position-picker .foatt-input {
  margin-bottom: 6px;
}
.foatt-grouping-position-list {
  max-height: 220px; overflow-y: auto;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 4px;
}
.foatt-grouping-position-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 12px;
  background: none; border: 0;
  border-bottom: 1px solid var(--foatt-border-soft);
  font-size: 13px; cursor: pointer; text-align: left;
  color: var(--foatt-text);
}
.foatt-grouping-position-item:last-child { border-bottom: 0; }
.foatt-grouping-position-item:hover { background: var(--foatt-surface-alt); }
.foatt-grouping-position-item.is-current { background: var(--foatt-surface-alt); }
.foatt-grouping-position-item-label { flex: 1; }
.foatt-grouping-position-item-sub {
  font-family: var(--foatt-mono, monospace);
  color: var(--foatt-text-faint); font-size: 11px;
}
.foatt-grouping-position-item-current {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--foatt-text-muted);
  background: var(--foatt-surface);
  padding: 1px 6px; border-radius: 3px;
}

.foatt-grouping-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--foatt-text-muted);
  padding: 4px; border-radius: 4px;
}
.foatt-grouping-modal-close:hover { background: var(--foatt-surface-alt); color: var(--foatt-text); }

.foatt-grouping-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.foatt-grouping-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
  display: flex; justify-content: flex-end; gap: 8px;
}

.foatt-grouping-form-grid {
  display: grid; grid-template-columns: 1fr 160px; gap: 12px;
  margin-bottom: 16px;
}

.foatt-grouping-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--foatt-border-soft);
  margin-bottom: 12px;
}
.foatt-grouping-tab {
  background: none; border: 0; padding: 8px 12px;
  font-size: 13px; color: var(--foatt-text-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
}
.foatt-grouping-tab:hover { color: var(--foatt-text); }
.foatt-grouping-tab.is-active {
  color: var(--foatt-text); font-weight: 600;
  border-bottom-color: var(--foatt-accent);
}

.foatt-grouping-tab-pane {
  margin-bottom: 16px;
}
.foatt-grouping-tab-pane.hidden { display: none; }

.foatt-grouping-account-list, .foatt-grouping-type-list {
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  background: var(--foatt-surface-alt);
  max-height: 220px; overflow-y: auto;
}

.foatt-grouping-account-item, .foatt-grouping-type-item {
  display: grid;
  grid-template-columns: 18px 80px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-grouping-account-item:last-child, .foatt-grouping-type-item:last-child { border-bottom: 0; }
.foatt-grouping-account-item:hover, .foatt-grouping-type-item:hover { background: var(--foatt-surface); }
.foatt-grouping-account-num { font-family: var(--foatt-mono, monospace); color: var(--foatt-text-muted); font-size: 12px; }
.foatt-grouping-account-name { color: var(--foatt-text); }
.foatt-grouping-account-type {
  font-family: var(--foatt-mono, monospace); color: var(--foatt-text-faint); font-size: 11px;
  background: var(--foatt-surface); padding: 1px 6px; border-radius: 3px;
}

.foatt-grouping-type-item {
  grid-template-columns: 18px 1fr auto;
}
.foatt-grouping-type-name { color: var(--foatt-text); font-weight: 500; }
.foatt-grouping-type-code { font-family: var(--foatt-mono, monospace); color: var(--foatt-text-faint); font-size: 11px; }
.foatt-grouping-type-cat {
  padding: 6px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--foatt-text-muted);
  background: var(--foatt-surface);
  border-bottom: 1px solid var(--foatt-border-soft);
}

.foatt-grouping-preview {
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  padding: 12px;
  background: var(--foatt-surface-alt);
}
.foatt-grouping-preview-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--foatt-text-muted); margin-bottom: 8px;
}
.foatt-grouping-preview-status { font-style: italic; }
.foatt-grouping-preview-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
  min-height: 28px;
}
.foatt-grouping-preview-cell {
  background: var(--foatt-surface); border: 1px solid var(--foatt-border-soft);
  border-radius: 4px; padding: 6px 8px; min-width: 64px;
  text-align: right;
}
.foatt-grouping-preview-period { font-size: 10px; color: var(--foatt-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.foatt-grouping-preview-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.foatt-grouping-preview-cell.is-negative .foatt-grouping-preview-value { color: var(--foatt-rose); }
.foatt-grouping-preview-cell.is-positive .foatt-grouping-preview-value { color: var(--foatt-emerald); }
.foatt-grouping-preview-cell.is-zero    .foatt-grouping-preview-value { color: var(--foatt-text-faint); }
.foatt-grouping-preview-cell.is-error   .foatt-grouping-preview-value { color: var(--foatt-rose); }

/* Subtotal + grouping cells: text was unaligned (top-left default for
   anonymous text in a flex container) which made grouping rows look
   stuck in the corner compared to regular cells. Center vertically and
   right-align numbers like the editable cells do. */
.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-label {
  align-items: center;
  padding: 0 12px;
}
.foatt-plan-row-subtotal .foatt-grouping-link {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}
.foatt-plan-row-subtotal .foatt-grouping-link:hover {
  text-decoration: underline;
}
.foatt-plan-row-subtotal .foatt-plan-cell-subtotal-value {
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.foatt-plan-row-subtotal .foatt-plan-cell-total {
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
}

/* ===== Grouping modal: token chips + autocomplete ===== */

.foatt-grouping-formula-wrap { position: relative; }

.foatt-grouping-autocomplete {
  position: absolute;
  display: none;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  min-width: 240px;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.foatt-grouping-autocomplete.is-open { display: block; }

.foatt-grouping-autocomplete-item {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  background: none; border: 0; padding: 6px 12px; font-size: 13px;
  cursor: pointer; gap: 8px;
}
.foatt-grouping-autocomplete-item:hover,
.foatt-grouping-autocomplete-item.is-active {
  background: var(--foatt-accent-soft);
}
.foatt-grouping-autocomplete-label { font-weight: 500; color: var(--foatt-text); }
.foatt-grouping-autocomplete-sub   { font-size: 11px; color: var(--foatt-text-muted); }

.foatt-grouping-token-tray {
  margin-top: 12px;
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  background: var(--foatt-surface-alt);
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
}
.foatt-grouping-token-section + .foatt-grouping-token-section { margin-top: 10px; }
.foatt-grouping-token-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--foatt-text-muted); margin-bottom: 4px;
}
.foatt-grouping-token-list { display: flex; flex-wrap: wrap; gap: 6px; }
.foatt-grouping-token-chip {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: inherit;
  max-width: 100%;
}
.foatt-grouping-token-chip:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-grouping-token-chip.is-hidden { display: none; }
.foatt-grouping-token-label-text {
  font-weight: 500; color: var(--foatt-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.foatt-grouping-token-chip code {
  font-family: var(--foatt-mono, monospace);
  font-size: 11px;
  color: var(--foatt-text-muted);
  background: var(--foatt-surface-alt);
  padding: 1px 4px;
  border-radius: 3px;
}
.foatt-grouping-token-sub { font-size: 10px; color: var(--foatt-text-faint); }
.foatt-grouping-token-section.is-hidden { display: none; }

/* ===== GridView modified banner + hide-row affordance ===== */

.foatt-grid-view-modified-banner {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 8px 16px;
  background: var(--foatt-accent-soft);
  border-bottom: 1px solid var(--foatt-accent);
  font-size: 12px;
}
.foatt-grid-view-modified-banner.hidden { display: none; }
.foatt-grid-view-modified-banner-row {
  display: flex; justify-content: space-between; align-items: center;
}
.foatt-grid-view-modified-banner-text { color: var(--foatt-text); }
.foatt-grid-view-modified-banner-actions { display: flex; gap: 6px; }
.foatt-grid-view-modified-banner-list {
  margin-top: 8px;
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.foatt-grid-view-modified-banner-list.hidden { display: none; }
.foatt-grid-view-modified-banner-item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 4px;
  padding: 4px 8px;
}
.foatt-grid-view-modified-banner-item-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--foatt-text-muted);
}
.foatt-grid-view-modified-banner-item-name { color: var(--foatt-text); font-weight: 500; }

.foatt-plan-row.is-row-hidden { display: none !important; }

.foatt-plan-switcher-item-row .foatt-plan-switcher-item {
  border: 0;
  border-radius: 0;
}

/* ===== Row filter dropdown (direct checkbox UI) ===== */

.foatt-row-filter-menu {
  width: 360px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The .hidden class needs to win over the flex display above. */
.foatt-row-filter-menu.hidden { display: none; }

.foatt-row-filter-item {
  display: grid;
  grid-template-columns: 18px 70px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-row-filter-item:last-child { border-bottom: 0; }
.foatt-row-filter-item:hover { background: var(--foatt-surface-alt); }
.foatt-row-filter-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.foatt-row-filter-item.is-disabled:hover { background: transparent; }

.foatt-row-filter-num {
  font-family: var(--foatt-mono, monospace);
  color: var(--foatt-text-muted);
  font-size: 11px;
  text-align: right;
}
.foatt-row-filter-name {
  color: var(--foatt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foatt-row-filter-meta {
  font-family: var(--foatt-mono, monospace);
  font-size: 10px;
  color: var(--foatt-text-faint);
  background: var(--foatt-surface-alt);
  padding: 1px 5px;
  border-radius: 3px;
}

.foatt-row-filter-button-active {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
  color: var(--foatt-accent-text, var(--foatt-accent));
}

/* ----- Real-time presence (other users in this plan) ----- */

/* Avatar pills in the page header — one per remote user. Color and
   initials come from PlanPresenceChannel. Slight overlap stacks them
   tight when the roster gets long. */
.foatt-presence-pills {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 4px;
}
.foatt-presence-pills.is-empty {
  display: none;
}
.foatt-presence-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  user-select: none;
  box-shadow: 0 0 0 2px var(--foatt-surface), 0 1px 3px rgba(15, 23, 42, 0.12);
  cursor: default;
  transition: transform 0.15s ease;
}
.foatt-presence-pill + .foatt-presence-pill {
  margin-left: -6px;
}
.foatt-presence-pill:hover {
  transform: translateY(-1px);
  z-index: 1;
}
/* Floating notice when the same user has the plan open in another
   tab. Soft warning, not blocking — both tabs still work, but it
   sets expectations about why edits in one show up in the other. */
.foatt-presence-self-tab-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--foatt-surface, #fff);
  color: var(--foatt-text, #1f2937);
  border: 1px solid var(--foatt-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  pointer-events: none;
}

/* "You" pill — slightly desaturated + an inner white ring so it reads
   as outlined rather than filled. Distinct from peer pills at a glance
   without needing a label. Sits at the end of the row. */
.foatt-presence-pill.is-self {
  filter: saturate(0.85);
  box-shadow:
    inset 0 0 0 2px var(--foatt-surface),
    0 0 0 2px var(--foatt-surface),
    0 1px 3px rgba(15, 23, 42, 0.12);
}
.foatt-presence-pill.is-editing::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #21B97A;
  border: 2px solid var(--foatt-surface);
  animation: foatt-presence-pulse 1.6s ease-in-out infinite;
}
@keyframes foatt-presence-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* Cells inside a peer's selection range — just the tinted background.
   No per-cell border, so a 5×5 range reads as a single shaded
   rectangle rather than 25 individually-outlined cells. */
.foatt-plan-cell-value.has-presence {
  background-color: color-mix(in srgb, var(--foatt-presence-color, transparent) 10%, transparent);
}
/* The peer's *anchor* cell (their cursor) is the one cell that gets
   the full border — distinguishes "where they are right now" from
   the rest of their selection. Initials tag (rendered separately
   via ::before) sits on this same cell. */
.foatt-plan-cell-value.has-presence-anchor {
  box-shadow: inset 0 0 0 2.5px var(--foatt-presence-color, transparent);
  z-index: 1;
}
.foatt-plan-cell-value.has-presence .foatt-plan-input {
  font-weight: 600;
}
/* Anchor cell (where the peer's cursor sits) needs to stack above the
   sticky head (z-index 3) so its floating initials tag — which
   overflows the cell upward — isn't clipped by the head row.
   Side effect: when scrolling, this single cell briefly paints over
   the head as it scrolls past. Acceptable trade-off for the better
   "tag floats outside the cell" look. */
.foatt-plan-cell-value.has-presence-anchor {
  z-index: 5;
}
/* Initials tag floats above the top-right corner of the anchor cell —
   pill-style, slightly overhanging the cell border so it reads as a
   peer's "marker" rather than a cell decoration. Anchor cell's
   z-index: 5 (above) lets this tag clear the sticky head. */
.foatt-plan-cell-value.has-presence-anchor::before {
  content: attr(data-presence-initials);
  position: absolute;
  top: -7px;
  right: -2px;
  background: var(--foatt-presence-color, transparent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 8px;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

/* =====================================================================
   Formula builder panel (issue #36)
   Floating panel that doesn't block the grid behind it. Anchored to the
   top-right of the viewport. Opens via the formula bar's "Build" button
   or Cmd+Shift+F.
   ===================================================================== */

.foatt-fbuilder-panel {
  position: fixed;
  top: 80px;
  right: 16px;
  width: 460px;
  max-height: calc(100vh - 96px);
  z-index: 95;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
.foatt-fbuilder-panel.hidden { display: none; }
.foatt-fbuilder-panel.is-pick-mode {
  /* Slight tint + visible pick badge to remind the user picks land here. */
  border-color: var(--foatt-accent);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 0 0 3px var(--foatt-accent-soft);
}

/* When the builder is in pick mode, the grid hints at the new affordance.
   The grid stays fully interactive, but we tint cells on hover so the
   user feels the click-to-insert mode. */
body.foatt-formula-builder-picking .foatt-plan-cell-value:hover,
body.foatt-formula-builder-picking .foatt-plan-cell-subtotal-value:hover,
body.foatt-formula-builder-picking .foatt-plan-cell-total:hover {
  outline: 1px dashed var(--foatt-accent);
  outline-offset: -1px;
  cursor: crosshair;
}

/* ---- Header ---- */
.foatt-fbuilder-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--foatt-border-soft);
  background: var(--foatt-surface-alt);
}
.foatt-fbuilder-header.is-draggable {
  cursor: grab;
}
.foatt-fbuilder-header.is-draggable:active {
  cursor: grabbing;
}
.foatt-fbuilder-header.is-draggable::before {
  content: "⋮⋮";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: -1px;
  color: var(--foatt-text-faint);
  user-select: none;
  pointer-events: none;
}
.foatt-fbuilder-header {
  position: relative;
  padding-left: 22px;
}
.foatt-fbuilder-title-wrap { display: flex; flex-direction: column; min-width: 0; }
.foatt-fbuilder-title {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--foatt-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foatt-fbuilder-subtitle {
  font-size: 11px; color: var(--foatt-text-muted); margin-top: 2px;
}
.foatt-fbuilder-close {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--foatt-text-muted); border-radius: 4px;
}
.foatt-fbuilder-close:hover { background: var(--foatt-surface); color: var(--foatt-text); }

/* ---- Sections ---- */
.foatt-fbuilder-formula-section,
.foatt-fbuilder-pick-section,
.foatt-fbuilder-tabs-section,
.foatt-fbuilder-preview-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--foatt-border-soft);
}
.foatt-fbuilder-tabs-section { padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.foatt-fbuilder-preview-section { background: var(--foatt-surface-alt); }

.foatt-fbuilder-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--foatt-text-muted);
  margin-bottom: 4px;
}

.foatt-fbuilder-formula-wrap { position: relative; }
.foatt-fbuilder-textarea {
  width: 100%;
  font-family: var(--foatt-mono, monospace);
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  background: var(--foatt-surface);
  color: var(--foatt-text);
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.foatt-fbuilder-textarea:focus {
  outline: none;
  border-color: var(--foatt-accent);
  box-shadow: 0 0 0 2px var(--foatt-accent-soft);
}

.foatt-fbuilder-quick-actions {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.foatt-fbuilder-quick {
  background: var(--foatt-surface-alt);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 4px;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--foatt-text);
}
.foatt-fbuilder-quick:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}

/* ---- Pick-from-grid + Abs/Rel toggle ---- */
.foatt-fbuilder-pick-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.foatt-fbuilder-pick-btn {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--foatt-text);
}
.foatt-fbuilder-pick-btn:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-fbuilder-pick-btn.is-active {
  background: var(--foatt-accent);
  border-color: var(--foatt-accent);
  color: #fff;
  font-weight: 600;
}

.foatt-fbuilder-style-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px;
}
.foatt-fbuilder-style-toggle-label {
  color: var(--foatt-text-muted);
  margin-right: 4px;
}
.foatt-fbuilder-style-pill {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-style-pill:hover { color: var(--foatt-text); }
.foatt-fbuilder-style-pill.is-active {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
  color: var(--foatt-accent);
  font-weight: 600;
}

/* ---- Tabs ---- */
.foatt-fbuilder-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--foatt-border-soft);
  padding: 0 8px;
  background: var(--foatt-surface);
  position: sticky; top: 0; z-index: 1;
}
.foatt-fbuilder-tab {
  background: none; border: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--foatt-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.foatt-fbuilder-tab:hover { color: var(--foatt-text); }
.foatt-fbuilder-tab.is-active {
  color: var(--foatt-text);
  font-weight: 600;
  border-bottom-color: var(--foatt-accent);
}

.foatt-fbuilder-search {
  /* The wrapping section has padding: 0 — we use horizontal margins
     here to inset the input. Without box-sizing, .foatt-input's own
     padding + border pushes total width past the panel edge, which
     is the overflow the user saw. */
  display: block;
  margin: 8px 14px;
  width: calc(100% - 28px);
  box-sizing: border-box;
  font-size: 12px;
}

.foatt-fbuilder-tab-content {
  padding: 4px 14px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 100px;
  max-height: 280px;
}

.foatt-fbuilder-section-hint {
  font-size: 11px; color: var(--foatt-text-muted);
  margin-bottom: 6px;
}
.foatt-fbuilder-section-hint code {
  font-family: var(--foatt-mono, monospace);
  background: var(--foatt-surface-alt);
  padding: 0 4px; border-radius: 3px;
}

.foatt-fbuilder-empty {
  padding: 18px 12px; text-align: center;
  color: var(--foatt-text-muted); font-size: 12px;
}

/* List rows (accounts / drivers / groupings) */
.foatt-fbuilder-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--foatt-border-soft);
  border-radius: 6px;
  background: var(--foatt-surface);
  overflow: hidden;
}
.foatt-fbuilder-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  background: none; border: 0;
  text-align: left;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--foatt-border-soft);
  color: var(--foatt-text);
}
.foatt-fbuilder-row:last-child { border-bottom: 0; }
.foatt-fbuilder-row:hover {
  background: var(--foatt-accent-soft);
}
.foatt-fbuilder-row-num {
  font-family: var(--foatt-mono, monospace);
  color: var(--foatt-text-muted);
  font-size: 11px;
}
.foatt-fbuilder-row-label {
  color: var(--foatt-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foatt-fbuilder-row-sub {
  font-family: var(--foatt-mono, monospace);
  font-size: 10px;
  color: var(--foatt-text-faint);
  background: var(--foatt-surface-alt);
  padding: 1px 6px; border-radius: 3px;
}

/* Periods tab */
.foatt-fbuilder-period-group { margin-bottom: 12px; }
.foatt-fbuilder-period-group:last-child { margin-bottom: 0; }
.foatt-fbuilder-period-group-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.foatt-fbuilder-period-group-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--foatt-text-muted); font-weight: 700;
}
.foatt-fbuilder-period-group-hint {
  font-size: 10px; color: var(--foatt-text-faint);
}
.foatt-fbuilder-period-subhead {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--foatt-text-faint); margin: 6px 0 4px;
}

.foatt-fbuilder-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.foatt-fbuilder-chip {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--foatt-text);
  text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.foatt-fbuilder-chip:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-fbuilder-chip code {
  font-family: var(--foatt-mono, monospace);
  font-size: 10px;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-chip-label {
  font-size: 11px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foatt-fbuilder-chip-relative {
  border-color: var(--foatt-accent-soft);
  background: linear-gradient(to bottom, var(--foatt-surface), var(--foatt-surface-alt));
}

/* Functions tab */
.foatt-fbuilder-fn-list {
  display: flex; flex-direction: column; gap: 4px;
}
.foatt-fbuilder-fn-card {
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 5px;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
}
.foatt-fbuilder-fn-card:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-fbuilder-fn-sig {
  font-family: var(--foatt-mono, monospace);
  font-size: 12px;
  color: var(--foatt-text);
}
.foatt-fbuilder-fn-name { color: var(--foatt-accent); font-weight: 700; }
.foatt-fbuilder-fn-args { color: var(--foatt-text-muted); }
.foatt-fbuilder-fn-desc {
  font-size: 11px; color: var(--foatt-text-muted); margin-top: 2px;
}


/* Preview */
.foatt-fbuilder-preview-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.foatt-fbuilder-preview-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--foatt-text-muted); font-weight: 700;
}
.foatt-fbuilder-preview-status {
  font-size: 10px; color: var(--foatt-text-faint); font-style: italic;
}
.foatt-fbuilder-preview {
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  min-height: 38px;
}
.foatt-fbuilder-preview-cell {
  flex: 0 0 auto;
  min-width: 56px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 4px;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.foatt-fbuilder-preview-cell.is-current {
  border-color: var(--foatt-accent);
  box-shadow: 0 0 0 1px var(--foatt-accent);
}
.foatt-fbuilder-preview-cell.is-negative .foatt-fbuilder-preview-value { color: var(--foatt-rose); }
.foatt-fbuilder-preview-cell.is-positive .foatt-fbuilder-preview-value { color: var(--foatt-emerald); }
.foatt-fbuilder-preview-cell.is-zero    .foatt-fbuilder-preview-value { color: var(--foatt-text-faint); }
.foatt-fbuilder-preview-cell.is-error   .foatt-fbuilder-preview-value { color: var(--foatt-rose); }
.foatt-fbuilder-preview-period {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-preview-value {
  font-weight: 600; font-size: 11px;
}
.foatt-fbuilder-preview-error {
  color: var(--foatt-rose); font-size: 11px;
  display: block; padding: 6px;
}

/* Footer */
.foatt-fbuilder-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--foatt-surface-alt);
  border-top: 1px solid var(--foatt-border-soft);
}
/* Keyboard hint stays left-aligned while the action buttons stay
   right-aligned — the `margin-right: auto` is what pushes them apart. */
.foatt-fbuilder-footer-hint {
  margin-right: auto;
  font-size: 11px;
  color: var(--foatt-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.foatt-fbuilder-footer-hint kbd {
  font-family: var(--foatt-mono, monospace);
  font-size: 10px;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border-soft);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--foatt-text);
  box-shadow: 0 1px 0 var(--foatt-border-soft);
}

.foatt-plan-formula-build-btn {
  /* Slight accent on the Build button so it reads as the discoverable
     primary alternative to typing in the bar. */
  border-color: var(--foatt-accent-soft);
  color: var(--foatt-accent);
}
.foatt-plan-formula-build-btn:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-plan-formula-build-icon {
  font-family: var(--foatt-mono, "ui-serif", serif);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.foatt-plan-formula-build-icon em {
  font-style: italic;
  font-weight: 600;
}
.foatt-plan-formula-build-icon sub {
  font-size: 9px;
  margin-left: 1px;
  vertical-align: sub;
}
/* Same fx glyph used in the right-click menu — sized to match the
   menu's 13px icons so the row aligns with copy/cut/paste above it. */
.foatt-grid-context-menu-fx {
  width: 13px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
}

/* Period prompt: shown after the user picks an account/driver/grouping.
   Takes over the tab area until they pick a period or cancel. The aim
   is one obvious primary action ("This period") with the next-most-
   common scenarios one click away. */
.foatt-fbuilder-period-prompt {
  padding: 4px 0 8px;
}
.foatt-fbuilder-period-prompt-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--foatt-accent-soft);
  border-radius: 6px;
  margin-bottom: 8px;
}
.foatt-fbuilder-period-prompt-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--foatt-text-muted); font-weight: 700;
}
.foatt-fbuilder-period-prompt-ref {
  color: var(--foatt-text); font-weight: 600; font-size: 13px;
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foatt-fbuilder-period-prompt-label code {
  font-family: var(--foatt-mono, monospace);
  font-size: 11px;
  background: var(--foatt-surface);
  padding: 1px 6px; border-radius: 3px;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-period-prompt-help {
  font-size: 12px; color: var(--foatt-text-muted);
  margin-bottom: 8px;
}
/* Scope indicator + toggle inside the period prompt. Sits between the
   account label and the "Which period?" question so it reads as part of
   the same context block. Default scope is `@self`; clicking the toggle
   flips to rollup. */
.foatt-fbuilder-period-prompt-scope {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-period-prompt-scope-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700;
}
.foatt-fbuilder-period-prompt-scope-value {
  color: var(--foatt-text); font-weight: 500;
  flex: 1 1 auto;
}
.foatt-fbuilder-period-prompt-scope-value code {
  font-family: var(--foatt-mono, monospace);
  font-size: 10.5px;
  background: var(--foatt-surface);
  padding: 1px 5px; border-radius: 3px;
  color: var(--foatt-text-muted);
  margin-left: 2px;
}
.foatt-fbuilder-period-prompt-scope-toggle {
  background: none; border: 1px solid var(--foatt-border-soft);
  border-radius: 999px;
  font-size: 10.5px;
  padding: 2px 9px;
  cursor: pointer;
  color: var(--foatt-text-muted);
}
.foatt-fbuilder-period-prompt-scope-toggle:hover {
  border-color: var(--foatt-accent);
  color: var(--foatt-accent);
  background: var(--foatt-accent-soft);
}
.foatt-fbuilder-period-prompt-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.foatt-fbuilder-period-prompt-chip {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  background: var(--foatt-surface);
  border: 1px solid var(--foatt-border);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--foatt-text);
}
.foatt-fbuilder-period-prompt-chip:hover {
  background: var(--foatt-accent-soft);
  border-color: var(--foatt-accent);
}
.foatt-fbuilder-period-prompt-chip.is-primary {
  grid-column: 1 / -1;
  background: var(--foatt-accent);
  border-color: var(--foatt-accent);
  color: #fff;
}
.foatt-fbuilder-period-prompt-chip.is-primary:hover {
  filter: brightness(1.05);
}
.foatt-fbuilder-period-prompt-chip-title {
  font-size: 13px; font-weight: 600;
}
.foatt-fbuilder-period-prompt-chip-sub {
  font-size: 10px;
  color: var(--foatt-text-muted);
  font-family: var(--foatt-mono, monospace);
}
.foatt-fbuilder-period-prompt-chip.is-primary .foatt-fbuilder-period-prompt-chip-sub {
  color: rgba(255, 255, 255, 0.78);
}

.foatt-fbuilder-period-prompt-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.foatt-fbuilder-period-prompt-more,
.foatt-fbuilder-period-prompt-cancel {
  background: none; border: 0; cursor: pointer;
  font-size: 11px;
  color: var(--foatt-text-muted);
  padding: 4px 6px;
  border-radius: 4px;
}
.foatt-fbuilder-period-prompt-more:hover,
.foatt-fbuilder-period-prompt-cancel:hover {
  background: var(--foatt-surface-alt);
  color: var(--foatt-text);
}
.foatt-fbuilder-period-prompt-cancel { color: var(--foatt-text-faint); }

.foatt-fbuilder-period-prompt-expanded {
  margin-top: 10px;
  padding: 8px;
  background: var(--foatt-surface-alt);
  border-radius: 6px;
}

/* Post-pick flip chip — surfaces "Inserted X · Make absolute/relative"
   for 12s after a grid pick so the user can change their mind without
   hunting for undo. */
.foatt-fbuilder-flip-chip {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  transform: translateY(100%);
  z-index: 6;
  background: var(--foatt-text);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  animation: foatt-fbuilder-flip-pop 180ms ease-out;
}
.foatt-fbuilder-flip-chip.is-open { display: flex; }
.foatt-fbuilder-flip-chip-label {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foatt-fbuilder-flip-chip-label code {
  font-family: var(--foatt-mono, monospace);
  background: rgba(255, 255, 255, 0.16);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.foatt-fbuilder-flip-chip-action {
  background: var(--foatt-accent);
  border: 0;
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.foatt-fbuilder-flip-chip-action:hover { filter: brightness(1.08); }
.foatt-fbuilder-flip-chip-dismiss {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  padding: 0 4px;
  cursor: pointer;
  line-height: 1;
}
.foatt-fbuilder-flip-chip-dismiss:hover { color: #fff; }
@keyframes foatt-fbuilder-flip-pop {
  from { opacity: 0; transform: translateY(calc(100% + 6px)); }
  to   { opacity: 1; transform: translateY(100%); }
}

/* Spinner used in the variance-review AI explanation section while
   an ExplainJob is in flight. Re-usable elsewhere if more async UI
   surfaces show up. */
@keyframes foatt-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Schedule-contribution badge — small paperclip in the top-left of any
   cell whose value includes a CapEx schedule posting (PP&E balance,
   Cash outflow, Depreciation Expense). Surfaces the breakdown on hover
   via the cell's `title` attribute. Same pattern as the note badge so
   users get a consistent affordance for "this cell has metadata". */
.foatt-plan-cell-schedule-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  pointer-events: none;
  color: var(--foatt-accent-text);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.foatt-plan-cell-value.has-schedule { position: relative; }
.foatt-plan-cell-value.has-schedule .foatt-plan-input {
  padding-left: 14px;
}