/* Winston V3 — Plan screen styles. Tracker #226 slice 7.
   Canonical mockup at dashboard/v3/mockups/winston-plan.html. */

.plan-screen {
  max-width: var(--content-max-dense, 1600px);
  margin: 0 auto;
  padding: var(--space-6) var(--content-pad);
}

.plan-head { margin-bottom: var(--space-5); }
.plan-eyebrow {
  font-size: var(--type-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-2);
}
.plan-screen h1 {
  font-size: var(--type-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
}
.plan-intro {
  font-size: var(--type-sm);
  color: var(--ink-3);
  max-width: 760px;
  margin: 0;
  line-height: var(--leading-base);
}
.plan-intro strong { color: var(--ink); font-weight: var(--weight-semi); }
.plan-intro a { color: var(--ai); font-weight: var(--weight-semi); }

/* Capital row */
.plan-capital-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.plan-cap-label {
  font-size: var(--type-sm);
  color: var(--ink-3);
}
.plan-cap-amount {
  font-family: var(--font-mono);
  font-size: var(--type-2xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.plan-cap-edit-note {
  font-size: var(--type-xs);
  flex: 1;
  min-width: 320px;
  max-width: 560px;
  line-height: var(--leading-snug);
}
.plan-cap-edit-note a { color: var(--ai); font-weight: var(--weight-semi); }

/* Headline card with Winston voice */
.plan-headline {
  background: linear-gradient(180deg, rgba(31,63,143,0.08), rgba(31,63,143,0.02));
  border: 1px solid var(--ai-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}
.plan-headline::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ai);
}
.plan-head-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.plan-w-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ai);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-black);
  font-size: 14px;
}
.plan-speaker {
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai);
  font-weight: var(--weight-bold);
}
.plan-pitch {
  font-size: var(--type-md);
  color: var(--ink);
  line-height: var(--leading-base);
  max-width: 820px;
  margin-bottom: var(--space-4);
}
.plan-pitch strong { color: var(--ai); font-weight: var(--weight-bold); }
.plan-pitch .mono { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--ink); }

/* Allocation bars — dual: Currently (dim) + Winston suggests (full) */
.plan-alloc-bar-wrap {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.plan-alloc-bar-row.is-current { opacity: 0.65; }
.plan-alloc-bar-row.is-current .plan-alloc-bar-lbl::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 6px;
  vertical-align: middle;
}
.plan-alloc-bar-row.is-suggested .plan-alloc-bar-lbl::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ai);
  margin-right: 6px;
  vertical-align: middle;
}
.plan-alloc-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.plan-alloc-bar-lbl {
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
}
.plan-alloc-bar-row.is-suggested .plan-alloc-bar-lbl { color: var(--ai); }
.plan-alloc-bar-total {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.plan-alloc-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}
.plan-alloc-seg {
  display: flex;
  align-items: center;
  /* Left-align so the leading "$" + most-significant digits stay visible when
     a narrow segment clips. Centering hid both ends — "$18,409" read as "409"
     and no ellipsis showed. With flex-start the tail truncates with "…". */
  justify-content: flex-start;
  color: white;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-bold);
  /* Narrow segments (Rotation/Hedge/Insurance) must clip to one line —
     without this the label wraps and overlaps the adjacent segment. */
  min-width: 0;
  padding: 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-alloc-seg-empty {
  background: var(--surface-3);
  color: var(--ink-muted);
  justify-content: center;
}
.plan-alloc-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
/* "matching" state — no apply needed */
.plan-headline.is-matching { background: var(--money-up-soft); border-color: rgba(21,128,61,0.35); }
.plan-headline.is-matching::before { background: var(--money-up); }
.plan-headline.is-matching .plan-speaker { color: var(--money-up); }
.plan-alloc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-xs);
  color: var(--ink-3);
}
.plan-alloc-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.plan-alloc-legend-item .mono { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--ink); }

/* Engine cards — current vs suggested side-by-side */
.plan-engines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.plan-engine-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.plan-engine-card.no-change {
  background: var(--surface-2);
}
.plan-ec-main { min-width: 0; }
.plan-ec-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.plan-ec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.plan-ec-name {
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  flex: 1;
}
.plan-ec-change-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ai-soft);
  color: var(--ai);
  border: 1px solid var(--ai-line);
}
.plan-ec-nochange-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}
/* Rotation is a permanently-dormant mockup (#319) — teal-tinted pill so it
   reads as demo, never as a live engine. Matches the Engines screen pill. */
.plan-ec-mockup-pill {
  display: inline-flex;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sleeve-rotation);
  background: var(--sleeve-rotation-soft);
}

/* Side-by-side compare row */
.plan-ec-compare {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: var(--space-4);
  align-items: stretch;
  margin-bottom: var(--space-4);
}
/* Phone: the two mono amount columns can't shrink side-by-side — stack
   current → arrow → suggested vertically at --bp-sm, the canonical
   single-column breakpoint (mobile-parity, 2026-06-01). */
@media (max-width: 600px) {
  .plan-ec-compare { grid-template-columns: 1fr; }
}
.plan-ec-side-block {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.plan-ec-current {
  /* "Truth" side — neutral surface */
}
.plan-ec-suggested {
  /* "Recommendation" side — cobalt tint when there's a change */
  background: var(--surface);
}
.plan-engine-card.has-change .plan-ec-suggested {
  background: var(--ai-soft);
  border-color: var(--ai-line);
}
.plan-engine-card.no-change .plan-ec-suggested {
  opacity: 0.85;
}
.plan-ec-side-lbl {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.plan-ec-suggested .plan-ec-side-lbl { color: var(--ai); }
.plan-engine-card.no-change .plan-ec-suggested .plan-ec-side-lbl { color: var(--ink-muted); }
.plan-ec-side-amount {
  font-family: var(--font-mono);
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.plan-ec-side-amount.is-muted { color: var(--ink-muted); }
.plan-ec-side-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.plan-ec-side-pct {
  font-size: var(--type-xs);
  color: var(--ink-3);
}
.plan-ec-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--weight-bold);
  color: var(--ai);
}
.plan-engine-card.no-change .plan-ec-arrow { color: var(--ink-faint); }

/* Engine state pills (now smaller, used inside side blocks) */
.plan-ec-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
}
.plan-ec-state-on {
  background: var(--money-up);
  color: white;
}
.plan-ec-state-off {
  background: var(--surface-3);
  color: var(--ink-3);
  border: 1px solid var(--border);
}
.plan-ec-state-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
  opacity: 0.85;
}
.plan-ec-state-off .plan-ec-state-dot { background: var(--ink-muted); opacity: 0.8; }

/* Reason row beneath the compare */
.plan-ec-reason {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}
.plan-ec-block-lbl {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}
.plan-ec-block-text {
  font-size: var(--type-sm);
  color: var(--ink-3);
  line-height: var(--leading-base);
}
.plan-ec-block-text strong { color: var(--ink); font-weight: var(--weight-semi); }
.plan-ec-block-text .mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

/* Commit row */
.plan-commit-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.plan-commit-body { flex: 1; min-width: 300px; }
.plan-commit-title {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.plan-commit-sub {
  font-size: var(--type-sm);
  color: var(--ink-muted);
  line-height: var(--leading-base);
}
.plan-commit-actions {
  display: flex;
  gap: var(--space-3);
}
.plan-btn-secondary,
.plan-btn-confirm {
  border-radius: 999px;
  padding: 11px 20px;
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.plan-btn-secondary {
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--border-strong);
}
.plan-btn-confirm {
  background: var(--ai);
  color: white;
  border: 1px solid var(--ai);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
}
.plan-btn-confirm:hover { background: var(--ai-2); }

/* ── Apply modal (slice 7b) ───────────────────────────────────────── */
.plan-apply-body { min-width: 480px; }
.plan-apply-sub {
  font-size: var(--type-sm);
  color: var(--ink-3);
  line-height: var(--leading-base);
  margin: 0 0 var(--space-4);
}
.plan-apply-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.plan-apply-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.plan-apply-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.plan-apply-step-num {
  width: 20px; height: 20px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
}
.plan-apply-step-label {
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.plan-apply-step-endpoint {
  font-size: var(--type-xs);
  color: var(--ink-muted);
  margin-left: auto;
  font-family: var(--font-mono);
}
.plan-apply-step-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 28px;
}
.plan-apply-diff-row {
  display: grid;
  grid-template-columns: 100px 1fr 18px 1fr;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--type-xs);
  color: var(--ink-3);
}
.plan-apply-diff-sleeve { color: var(--ink); font-weight: var(--weight-semi); }
.plan-apply-diff-from {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-decoration: line-through;
}
.plan-apply-diff-arrow { color: var(--ink-muted); }
.plan-apply-diff-to {
  font-family: var(--font-mono);
  color: var(--ai);
  font-weight: var(--weight-bold);
}

.plan-apply-confirm {
  margin: var(--space-4) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.plan-apply-confirm-label {
  display: block;
  font-size: var(--type-sm);
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.plan-apply-confirm-label .mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--ink);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.plan-apply-confirm-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--ink);
}
.plan-apply-confirm-input:focus {
  outline: 2px solid var(--ai-line);
  border-color: var(--ai);
}

.plan-apply-stream {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-apply-result {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-apply-result-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-weight: var(--weight-bold);
  font-size: 10px;
}
.plan-apply-result-pending { background: var(--surface-2); color: var(--ink-3); }
.plan-apply-result-pending .plan-apply-result-mark { background: var(--surface-3); color: var(--ink-muted); }
.plan-apply-result-ok { background: var(--money-up-soft); color: var(--ink); }
.plan-apply-result-ok .plan-apply-result-mark { background: var(--money-up); color: white; }
.plan-apply-result-fail { background: var(--money-down-soft); color: var(--ink); }
.plan-apply-result-fail .plan-apply-result-mark { background: var(--money-down); color: white; }

/* Capital ladder */
.plan-ladder {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.plan-ladder-head {
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.plan-ladder-rungs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.plan-rung {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.plan-rung.is-current {
  border-color: var(--ai);
  border-width: 2px;
  background: var(--ai-soft);
}
.plan-rung-cap {
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-bottom: 2px;
}
.plan-rung.is-current .plan-rung-cap { color: var(--ai); }
.plan-rung-status {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.plan-rung.is-current .plan-rung-status { color: var(--ai); }
.plan-rung-engines {
  display: flex;
  gap: 6px;
}
.plan-rung-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface);
}
.plan-rung-dot.is-on { border-color: transparent; }

/* Mobile */
@media (max-width: 600px) {
  .plan-screen { padding: var(--space-4) var(--content-pad-mobile); }
  .plan-engine-card { grid-template-columns: 1fr; }
  .plan-ec-side { align-items: flex-start; }
  .plan-ec-blocks { grid-template-columns: 1fr; }
}