/* ============================================================
   TravlFun · planner.css · v1.0 · © Luxa Grid LLC
   Composition for planner.html (pl- prefix). Loads after
   search.css (sp-* helpers) and the design system.
   ============================================================ */

body { margin: 0; }

.pl-main { max-width: 1140px; margin-inline: auto; padding: 32px 24px 90px; display: flex; flex-direction: column; gap: 24px; }
.pl-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pl-head h1 { font: var(--tf-text-h1); margin: 0 0 4px; }
.pl-head h1 .grad { background: var(--tf-gradient-horizon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-head p { font: var(--tf-text-body); color: var(--tf-ink-2); margin: 0; max-width: 62ch; }

/* Form */
.pl-form .tf-card__body { padding: 26px; gap: 18px; }
.pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .pl-grid { grid-template-columns: 1fr; } }

/* Generation progress */
.pl-progress { display: none; flex-direction: column; gap: 12px; padding: 26px; }
.pl-progress.is-on { display: flex; }
.pl-step { display: flex; align-items: center; gap: 12px; font: 500 14px var(--tf-font-body); color: var(--tf-ink-3); transition: color .2s; }
.pl-step .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 2px solid var(--tf-border-strong); color: transparent; font-size: 11px; }
.pl-step.is-active { color: var(--tf-ink); }
.pl-step.is-active .dot { border-color: var(--tf-color-primary); border-top-color: transparent; animation: tf-spin .7s linear infinite; }
.pl-step.is-done { color: var(--tf-ink-2); }
.pl-step.is-done .dot { border-color: var(--tf-color-secondary); background: var(--tf-color-secondary); color: #fff; animation: none; }

/* Result cards */
.pl-results { display: flex; flex-direction: column; gap: 22px; }
.pl-card { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--tf-ease), transform .4s var(--tf-ease); overflow: hidden; }
.pl-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pl-card { transition: none; opacity: 1; transform: none; } }

.pl-card__hero { position: relative; min-height: 130px; display: flex; align-items: flex-end; }
.pl-card__art { position: absolute; inset: 0; }
.pl-card__art svg { width: 100%; height: 100%; }
.pl-card__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,32,50,.05), rgba(11,32,50,.78)); }
.pl-card__hero .inner { position: relative; width: 100%; padding: 16px 20px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; color: #fff; }
.pl-card__hero .rank { font: 700 12px var(--tf-font-display); letter-spacing: .1em; color: #7FE8DB; }
.pl-card__hero h2 { font: 700 24px var(--tf-font-display); margin: 0; }
.pl-card__hero .why { font: 400 12.5px var(--tf-font-body); color: #D7E6F3; }
.pl-card__hero .score-wrap { margin-left: auto; }

.pl-card__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; }
@media (max-width: 900px) { .pl-card__body { grid-template-columns: 1fr; } }
.pl-itin { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.pl-itin h3, .pl-cost h3 { font: var(--tf-text-h4); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.pl-itin h3 svg, .pl-cost h3 svg { width: 16px; height: 16px; color: var(--tf-color-primary); }

.pl-day { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--tf-border); }
.pl-day:first-of-type { border-top: 0; }
.pl-day__n { width: 34px; height: 34px; border-radius: 11px; background: var(--tf-color-primary-soft);
  color: var(--tf-color-primary); display: grid; place-items: center; font: 700 12px var(--tf-font-display); }
.pl-day__t { font: 600 13.5px var(--tf-font-display); margin-bottom: 3px; }
.pl-day li { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.5 var(--tf-font-body); color: var(--tf-ink-2); }
.pl-day li svg { width: 13px; height: 13px; color: var(--tf-color-secondary-active); flex: none; margin-top: 3px; }
.pl-day li .cost { color: var(--tf-ink-3); white-space: nowrap; margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }
.pl-day ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.pl-cost { padding: 20px 22px; border-left: 1px solid var(--tf-border); background: var(--tf-surface-2);
  display: flex; flex-direction: column; gap: 10px; border-radius: 0 0 var(--tf-r-card) 0; }
@media (max-width: 900px) { .pl-cost { border-left: 0; border-top: 1px solid var(--tf-border); border-radius: 0 0 var(--tf-r-card) var(--tf-r-card); } }
.pl-cost__total { font: 700 26px var(--tf-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pl-cost__total .tilde { color: var(--tf-ink-3); }
.pl-cost__sub { font: var(--tf-text-body-s); color: var(--tf-ink-2); margin-top: -6px; }
.pl-cost__line { display: flex; gap: 8px; align-items: center; font: 400 13px var(--tf-font-body); color: var(--tf-ink-2);
  padding: 6px 0; border-top: 1px solid var(--tf-border); }
.pl-cost__line svg { width: 14px; height: 14px; color: var(--tf-color-primary); flex: none; }
.pl-cost__line b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--tf-ink); }
.pl-cost__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.pl-regen { display: none; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pl-regen.is-on { display: flex; }

.pl-wx { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--tf-font-body);
  border-radius: var(--tf-r-pill); padding: 5px 11px; background: rgba(234,243,251,.16); color: #EAF3FB;
  border: 1px solid rgba(234,243,251,.25); }

@media (max-width: 639px) {
  .pl-main { padding: 20px 16px 70px; }
  .pl-card__hero .score-wrap { margin-left: 0; }
}