/* Points planner. Values come from tokens.css only. */

.planner { padding-top: var(--spacing-900); padding-bottom: var(--spacing-700); }
.planner-head { display: grid; gap: var(--spacing-75); padding-top: var(--spacing-400); margin-bottom: var(--spacing-300); max-width: 680px; }

.notice {
  display: flex; align-items: flex-start; gap: var(--spacing-100);
  padding: var(--spacing-200);
  margin-bottom: var(--spacing-300);
  border-radius: var(--radius-12);
}
.notice > i { font-size: 1.25rem; color: var(--icon-info); flex-shrink: 0; }
.notice-strong { color: var(--text-primary); }
.notice-error { border-color: var(--border-error); }
.notice-error > i { color: var(--icon-error); }
.notice[hidden] { display: none; }

.planner-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--spacing-300); align-items: start; }
.planner-main { display: grid; gap: var(--spacing-300); }
.wallet { position: sticky; top: var(--spacing-900); }

.panel { padding: var(--spacing-300); display: grid; gap: var(--spacing-300); }
.panel-head { display: grid; gap: var(--spacing-50); }
.panel-sub { display: flex; align-items: center; gap: var(--spacing-50); }

/* ---------- Wallet ---------- */
.wallet-groups { display: grid; gap: var(--spacing-300); }
.wallet-group { display: grid; gap: var(--spacing-75); }
.wallet-list { display: grid; }
.wallet-row {
  position: relative;
  display: grid; grid-template-columns: 1fr 136px 40px; gap: var(--spacing-75); align-items: center;
  padding-block: var(--spacing-100);
}
.wallet-row + .wallet-row::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--border-primary); }
.wallet-name { display: grid; gap: var(--spacing-25); min-width: 0; }
.wallet-row .input { text-align: right; }
.wallet-row .field-error { grid-column: 1 / -1; }
.add-program { display: grid; gap: var(--spacing-75); }
.add-row { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-75); }

/* ---------- Empty states ---------- */
.empty {
  display: grid; justify-items: center; gap: var(--spacing-100); text-align: center;
  padding: var(--spacing-400) var(--spacing-200);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-12);
}
.empty p { max-width: 360px; }
.empty-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  color: var(--icon-secondary);
  font-size: 1.5rem;
}
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-75); margin-top: var(--spacing-75); }

/* ---------- Routes ---------- */
.route-list { display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.route-list:empty { display: none; }
.route-pill {
  display: inline-flex; align-items: center; gap: var(--spacing-25);
  padding: var(--spacing-50);
  border: 1px solid var(--border-primary-light);
  border-radius: var(--radius-full);
  background-color: var(--surface-primary);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.route-pill.is-active { background-color: var(--surface-primary-selected); border-color: var(--border-action-primary); }
.route-chip, .chip-remove {
  display: inline-flex; align-items: center; gap: var(--spacing-50);
  min-height: 32px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-full);
  transition: background-color 300ms var(--ease), transform 200ms var(--ease);
}
.route-chip { padding: var(--spacing-50) var(--spacing-100); }
.route-chip:hover, .chip-remove:hover { background-color: var(--surface-primary-hover); }
.route-chip:active, .chip-remove:active { transform: scale(0.98); }
.chip-remove { justify-content: center; width: 32px; color: var(--icon-subtle); }
@media (pointer: coarse) { .route-chip, .chip-remove { min-height: 44px; } .chip-remove { width: 44px; } }
.route-empty { color: var(--text-tertiary); }

.route-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--spacing-75); align-items: end; }
.route-form .field-error { grid-column: 1 / -1; }
.swap { margin-bottom: var(--spacing-25); }

/* ---------- Cabin filter ---------- */
.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-200); }
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: var(--spacing-25);
  margin: 0; padding: var(--spacing-50);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-12);
  background-color: var(--surface-secondary);
}
/* Nested radius: 12 outer minus 4 gap = 8 */
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: var(--spacing-50) var(--spacing-100);
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.segmented label:hover { color: var(--text-primary); background-color: var(--surface-secondary-hover); }
.segmented input:checked + label { background-color: var(--surface-primary-subtle); border-color: var(--border-action-secondary); color: var(--text-primary); }
.segmented input:focus-visible + label { outline: 2px solid var(--border-focus); outline-offset: 1px; }
@media (pointer: coarse) { .segmented label { min-height: 44px; } }
/* Gliding highlight: one thumb moves to the checked option (set by planner.js) */
.segmented { position: relative; }
.segmented label { position: relative; z-index: 1; }
.seg-thumb {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  border-radius: var(--radius-8);
  background-color: var(--surface-primary-subtle);
  border: 1px solid var(--border-action-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  opacity: 0;
}
.segmented.has-thumb .seg-thumb { opacity: 1; }
.segmented.has-thumb input:checked + label { background-color: transparent; border-color: transparent; }
.segmented.is-ready .seg-thumb {
  transition: translate 420ms cubic-bezier(0.32, 0.72, 0, 1), width 420ms cubic-bezier(0.32, 0.72, 0, 1), height 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) { .segmented.is-ready .seg-thumb { transition: none; } }

/* ---------- Results ---------- */
.results { display: grid; gap: var(--spacing-100); }
.results-summary { display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.hint { display: flex; align-items: center; gap: var(--spacing-75); color: var(--text-secondary); }
.hint i { color: var(--icon-info); font-size: 1.125rem; }
.result {
  display: grid; gap: var(--spacing-100);
  padding: var(--spacing-200);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-12);
}
.result-top { border-color: var(--border-action-primary); }
.top-label { display: flex; align-items: center; gap: var(--spacing-50); color: var(--text-info); }
.result-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-200); }
.result-prog { display: grid; gap: var(--spacing-25); }
.result-cost { text-align: right; display: grid; gap: var(--spacing-25); }
.result-cost .unit { color: var(--text-tertiary); }
.result-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-75); }
.result-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-100); }
.result-detail { max-width: 560px; }
.result-warn { display: flex; align-items: flex-start; gap: var(--spacing-50); color: var(--text-tertiary); }
.result-warn i { color: var(--icon-warning); font-size: 1rem; margin-top: var(--spacing-25); }
.result-link { margin-left: auto; }

/* Skeleton shaped like a result card */
.result-skeleton { display: grid; gap: var(--spacing-100); padding: var(--spacing-200); border: 1px solid var(--border-primary); border-radius: var(--radius-12); }
.sk-row { display: flex; justify-content: space-between; gap: var(--spacing-200); }
.sk { height: 16px; }
.sk-title { width: 220px; height: 20px; }
.sk-price { width: 96px; height: 24px; }
.sk-badge { width: 120px; height: 24px; border-radius: var(--radius-full); }
.sk-line { width: 70%; }

/* ---------- Route banner: departure board and flight path ---------- */
.route-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-300);
  padding: var(--spacing-200);
  border-radius: var(--radius-12);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-secondary);
}
.route-banner[hidden] { display: none; }
.planner-map { flex: 1 1 0; min-width: 0; max-width: 320px; height: auto; max-height: 88px; overflow: visible; }
.route-banner .flap-board { flex-shrink: 0; }
.planner-map .route-plane { offset-path: path('M16 72 Q160 -12 304 72'); offset-distance: 100%; opacity: 1; }
.route-banner.is-flying .route-plane { animation: fly 1200ms var(--ease) both; }

/* ---------- Entry motion ---------- */
.result, .wallet-row { transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.result.is-entering { opacity: 0; transform: translateY(16px); }
.wallet-row.is-entering { opacity: 0; transform: translateX(-16px); }
.result { transition-property: opacity, transform, border-color; }

/* ---------- Transfer flow ---------- */
.transfer-flow { display: grid; gap: var(--spacing-75); }
.tf-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spacing-100); }
.tf-node {
  display: grid; gap: var(--spacing-25);
  padding: var(--spacing-75) var(--spacing-100);
  border-radius: var(--radius-8);
  background-color: var(--surface-secondary);
}
.tf-node:last-of-type { text-align: right; }
.tf-link { position: relative; display: flex; align-items: center; justify-content: center; min-width: 64px; height: 24px; color: var(--icon-info); }
.tf-line { position: absolute; left: 0; right: var(--spacing-75); top: 50%; height: 2px; border-radius: var(--radius-full); background-color: var(--surface-info); transform-origin: left center; transform: scaleX(1); transition: transform 700ms var(--ease) 200ms; }
.tf-link i { position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 1rem; }
.tf-ratio {
  position: relative; z-index: 1;
  padding: 0 var(--spacing-75);
  border-radius: var(--radius-full);
  background-color: var(--surface-primary);
  color: var(--text-info);
}
.result.is-entering .tf-line { transform: scaleX(0); }

@media (max-width: 640px) {
  .route-banner { flex-direction: column; align-items: flex-start; gap: var(--spacing-100); }
  .planner-map { max-width: none; }
  .tf-link { min-width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .result, .wallet-row, .tf-line { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .planner-grid { grid-template-columns: 1fr; }
  .wallet { position: static; }
}
@media (max-width: 640px) {
  .panel { padding: var(--spacing-200); }
  .wallet-row { grid-template-columns: 1fr 120px 44px; }
  .route-form { grid-template-columns: 1fr auto 1fr; }
  .route-save { grid-column: 1 / -1; }
  .result-cost { text-align: left; }
  .result-link { margin-left: 0; }
  .sk-title { width: 160px; }
}