/* ─────────────────────────────────────────────────────────────────────
   #513 — the excursion package builder as the dive-os !658 wizard
   (settings/excursion_packages/_wizard). HotelOS geometry around gem parts:
   `.os-stepper` (rail), `.os-wizm-bar` (app-bar), the stepper-bars partial,
   `.os-setting-list`, `.os-desclist`, `.os-card` and the pinned
   `.os-wz-foot--pinned` footer. Numbers follow the locked PK frames.

   ≥1280  step rail · centre column · summary rail
   1024+  step rail · centre (the sidebar takes 240px; the summary rail drops)
   <1024  focused app-bar + progress bars; no shell menu button; one column;
          the footer goes one row (the gem does that ≤640).
   ───────────────────────────────────────────────────────────────────── */

.hos-pkw { min-height: 100%; background: var(--canvas); }

.hos-pkw__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: var(--space-10);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-12) var(--space-10);
}
.hos-pkw__center { min-width: 0; max-width: 620px; width: 100%; margin: 0 auto; }
.hos-pkw__errors { margin-bottom: var(--space-5); text-align: start; }

/* ── Step rail ── */
.hos-pkw-rail { position: sticky; top: var(--space-12); }
.hos-pkw-rail__brand {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
  font-weight: 600; color: var(--ink); min-width: 0;
}
.hos-pkw-rail__brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hos-pkw-rail__steps { list-style: none; margin: 0; padding: 0; }
.hos-pkw-rail__step {
  width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: start;
  color: inherit; cursor: pointer;
}
.hos-pkw-rail__step:disabled { cursor: default; }
.hos-pkw-rail__step:focus-visible { outline: none; }
.hos-pkw-rail__step:focus-visible .os-stepper__dot { box-shadow: var(--shadow-focus); }
/* Solid circles (muf's PK lock): a surface fill with a ring — accent for done
   and current, hairline for the steps to come — so the connector stops at
   each circle. Done fills with accent and shows a tick. */
.hos-pkw-rail .os-stepper__dot {
  width: 28px; height: 28px; position: relative; z-index: 1;
  background: var(--surface); color: var(--muted); border: 1px solid var(--hairline-strong);
  font-size: var(--text-sm);
}
.hos-pkw-rail .os-stepper__line { height: 18px; }
.hos-pkw-rail .os-stepper__body { padding-top: var(--space-1); }
.hos-pkw-rail .os-stepper__label { font-size: var(--text-sm); }
.hos-pkw-rail__tk { display: none; }
.hos-pkw-rail .os-stepper--done .os-stepper__dot { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.hos-pkw-rail .os-stepper--done .os-stepper__line { background: var(--accent); opacity: 1; }
.hos-pkw-rail .os-stepper--done .hos-pkw-rail__n { display: none; }
.hos-pkw-rail .os-stepper--done .hos-pkw-rail__tk { display: inline-flex; }
.hos-pkw-rail .os-stepper--done .os-stepper__label { color: var(--ink); }
.hos-pkw-rail .os-stepper--active .os-stepper__dot {
  background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.hos-pkw-rail .os-stepper--active .os-stepper__label { color: var(--accent); font-weight: 600; }
.hos-pkw-rail__step:not(:disabled):hover .os-stepper__label { color: var(--accent); }
.hos-pkw-rail__count { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--muted); }

/* ── Centre: one conversational step ── */
.hos-pkw-step__kicker {
  margin: 0; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.hos-pkw-step__q {
  margin: var(--space-2) 0 var(--space-1); text-align: center;
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.hos-pkw-step__sub { margin: 0 0 var(--space-6); text-align: center; color: var(--muted); }
.hos-pkw-step__body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Name: the big underlined field. */
.hos-pkw-bigname {
  display: block; width: 100%; padding: var(--space-2) 0; margin-bottom: var(--space-2);
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent;
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; text-align: center; color: var(--ink);
}
.hos-pkw-bigname::placeholder { color: var(--muted-2); }
.hos-pkw-bigname:focus { outline: none; border-bottom-color: var(--accent); }
.hos-pkw-bigname:user-invalid { border-bottom-color: var(--danger); }
.hos-pkw-step__body .os-field + .os-field { margin-top: 0; }
.hos-pkw-photo, .hos-pkw-review__card { margin: 0; }
/* The photo row keeps Choose beside it at every width (the gem drops a row's
   trail under its text in a narrow container; Review's rows still do). */
.hos-pkw-photo .os-setting-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.hos-pkw-photo .os-setting-item__trail { grid-column: auto; }

/* Itinerary: a card per day. */
.hos-pkw-days__list { display: flex; flex-direction: column; gap: var(--space-4); }
.hos-pkw-day .os-card__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.hos-pkw-day .os-card__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hos-pkw-day__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--hairline-2); }
.hos-pkw-day__name { flex: 1; min-width: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.hos-pkw-day__row .os-mono { color: var(--ink); }
.hos-pkw-day__empty { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--hairline-2); }
.hos-pkw-day__add { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--hairline-2); }
.hos-pkw-day__picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.hos-pkw-day__picker .os-field-select { flex: 1 1 220px; min-width: 0; }
.hos-pkw-day__qty { width: 72px; }
.hos-pkw-days__add { align-self: flex-start; }

/* Price: one figure, centred. */
.hos-pkw-price { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.hos-pkw-price__input { width: 180px; font-family: var(--font-mono); font-size: var(--text-2xl); text-align: center; }
.hos-pkw-price__saves, .hos-pkw-price__hint { margin: 0; text-align: center; }

/* Review */
.hos-pkw-review__days { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.hos-pkw-review__lines { padding: var(--space-1) var(--space-5); }

/* ── Summary rail ── */
.hos-pkw-sum { position: sticky; top: var(--space-12); padding: var(--space-5) var(--space-5) 0; }
.hos-pkw-sum__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.hos-pkw-sum .os-desclist { padding: var(--space-1) 0; }
.hos-pkw-sum__price {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin: var(--space-2) calc(-1 * var(--space-5)) 0; padding: var(--space-4) var(--space-5);
  background: var(--accent-soft); border-top: 1px solid var(--accent-border);
}
.hos-pkw-sum__price .k { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.hos-pkw-sum__price .v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--accent); }

/* ── Footer: the os-ds pinned bar ── */
.hos-pkw .os-wz-foot .os-btn[hidden] { display: none; }
@media (min-width: 1024px) {
  /* The bar starts after the sidebar (240px, or the 68px rail when it is
     collapsed). Outranks the gem's `inset` on specificity. No transition on
     `left` (hallmark MotionLayoutProperty): it snaps when the rail toggles. */
  .hos-shell .hos-pkw .os-wz-foot--pinned .os-wz-foot-inner { left: var(--sidebar-w); padding-inline: var(--space-10); }
  .hos-shell.is-rail-collapsed .hos-pkw .os-wz-foot--pinned .os-wz-foot-inner { left: 68px; }
}

/* ── App-bar (below 1024px only) ── */
.hos-pkw-bar { display: none; }

@media (max-width: 1279px) {
  .hos-pkw__grid { grid-template-columns: 200px minmax(0, 1fr); padding-inline: var(--space-10); }
  .hos-pkw-sum { display: none; }
}

@media (max-width: 1023px) {
  /* A focused flow: the bar names the package and the step; Cancel is the
     way out, so the shell's floating menu button goes. */
  body:has(.hos-pkw) .hos-shell-hamburger { display: none; }
  .hos-shell-content--bleed:has(.hos-pkw) { padding: 0; }
  .hos-pkw-bar {
    display: block; position: sticky; top: 0; z-index: 20;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
  }
  .hos-pkw-bar .os-wizm-bar { padding: calc(env(safe-area-inset-top) + var(--space-4)) var(--space-4) var(--space-2); }
  /* A 48px target for the only way out of the flow. */
  .hos-pkw-bar .os-wizm-bar__cancel {
    display: inline-flex; align-items: center; min-height: var(--control-h-touch); padding: 0 var(--space-2); color: var(--muted);
  }
  .hos-pkw-bar .os-wizm-bar__cancel:hover { color: var(--ink); }
  .hos-pkw-bar .hos-wz-couple { padding: 0 var(--space-4) var(--space-3); }
  .hos-pkw-bar .hos-wz-bars-inner { gap: 6px; }
  .hos-pkw-bar .hos-wz-seg { gap: 0; }
  .hos-pkw-bar .hos-wz-seg .lbrow { display: none; }
  .hos-pkw-bar .hos-wz-seg.on .bar { height: 4px; box-shadow: none; }

  /* 48px targets on a phone/tablet: the day cards' controls keep their quiet
     --sm look on desktop but take the gem's touch height here (an element-level
     re-point outranks the --sm modifier's own). */
  .hos-pkw-days :is(.os-btn, .os-field-select, .os-input) {
    --control-h: var(--control-h-touch); --control-pad-x: var(--control-pad-x-touch);
  }
  .hos-pkw-days :is(.os-field-select, .os-input) { min-height: var(--control-h-touch); }

  .hos-pkw__grid { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-4) var(--space-8); }
  .hos-pkw-rail { display: none; }
  .hos-pkw .os-wz-foot .hos-pkw-foot-cancel { display: none; }
}
@media (max-width: 640px) {
  .hos-pkw-step__q { font-size: var(--text-xl); }
  .hos-pkw-day__row, .hos-pkw-day__add, .hos-pkw-day__empty { padding-inline: var(--space-4); }
  /* os-ds centres the quiet actions off the end zone's first child, which is
     the hidden Cancel here: Save takes the auto margin instead. */
  .hos-pkw .os-wz-foot--pinned .os-grp.os-end > .hos-pkw-foot-cancel + .os-btn { margin-left: auto; }
}