/* A day is read down the page: what happens, in the order the owner set.
   Every gap here comes from the scale in application.css, so the rhythm is
   chosen once rather than invented at each rule. */

.itinerary-form__row {
  display: grid;
  gap: var(--space-3xs);
  padding-bottom: var(--space-s);
}

.itinerary-form__row label,
.itinerary-start > summary {
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Sections -------------------------------------------------------- */

/* Each panel of the editor is its own field. Without this the stays, the
   passes, the costs and the days run into one another as a single column of
   text, and the reader cannot tell where one subject ends. */
.itinerary-library,
.itinerary-visibility,
.itinerary-stays,
.itinerary-passes,
.itinerary-cost,
.itinerary-days {
  padding-block: var(--space-l);
}

.itinerary-library + .itinerary-visibility,
.itinerary-visibility + .itinerary-stays,
.itinerary-stays + .itinerary-passes,
.itinerary-passes + .itinerary-cost,
.itinerary-cost + .itinerary-days {
  border-top: 1px solid var(--line);
}

.itinerary-days .section-heading,
.itinerary-cost .section-heading,
.itinerary-stays .section-heading,
.itinerary-passes .section-heading,
.itinerary-library .section-heading,
.itinerary-visibility .section-heading {
  margin-bottom: var(--space-m);
}

/* ---- The day --------------------------------------------------------- */

.itinerary-day-list,
.itinerary-item-list,
.itinerary-stay-list,
.itinerary-pass-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A day is a field of its own, not a row in a table. The generous gap is what
   lets fifteen of them be scanned without the eye losing its place. */
.itinerary-day + .itinerary-day {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.itinerary-day__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
}

.itinerary-day__ordinal {
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.itinerary-day__date {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.itinerary-day__location {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.itinerary-day__note {
  margin: 0 0 var(--space-2xs);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Where the guest sleeps sits above the day's own list, because it is true of
   the whole night rather than of any one moment in it. */
.itinerary-day__stay {
  margin: 0 0 var(--space-2xs);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.itinerary-day__stay--missing {
  color: var(--signal);
  font-weight: 500;
}

.itinerary-day__stay-access {
  display: block;
}

/* ---- Items ----------------------------------------------------------- */

.itinerary-item-list {
  margin-block: var(--space-s);
}

.itinerary-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
}

/* A transport leg is a move between two things, so it reads lighter than the
   things themselves and sits slightly inside them. */
.itinerary-item--transport_leg {
  padding-left: var(--space-s);
}

.itinerary-item--transport_leg .itinerary-item__title {
  color: var(--ink-soft);
}

.itinerary-item__title {
  font-size: 1rem;
}

.itinerary-item__category {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color, currentColor) 16%, transparent);
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.itinerary-item__place,
.itinerary-item__mode,
.itinerary-item__note,
.itinerary-item__amount {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.itinerary-item__amount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* A row is dragged by its handle. The handle is quiet until the row is
   reached, because fifteen days of grips would be the loudest thing on the
   page. */
.itinerary-item__handle {
  width: 1rem;
  color: color-mix(in srgb, var(--ink) 25%, transparent);
  cursor: grab;
}

.itinerary-item__handle svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  display: block;
}

.itinerary-item:hover .itinerary-item__handle,
.itinerary-item:focus-within .itinerary-item__handle {
  color: var(--ink-soft);
}

.itinerary-item.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Everything that is not dragging lives behind one control. */
.itinerary-item__menu {
  position: relative;
  margin-left: var(--space-2xs);
}

.itinerary-item__menu > summary {
  padding: 0 var(--space-2xs);
  cursor: pointer;
  color: var(--ink-soft);
  list-style: none;
  line-height: 1;
}

.itinerary-item__menu > summary::-webkit-details-marker { display: none; }

.itinerary-item__menu-panel {
  position: absolute;
  right: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-3xs);
  min-width: 14rem;
  padding: var(--space-2xs);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: left;
}

.itinerary-item__menu-panel form { display: contents; }
.itinerary-item__move-day { display: grid; gap: var(--space-3xs); }
.link-button--danger { color: var(--signal); }

/* ---- The day's own actions ------------------------------------------- */

/* Held apart from the items above them, so "add" does not read as another
   thing that happens on the day. */
.itinerary-day__add-stop,
.itinerary-day__add-leg,
.itinerary-day__editor {
  margin-top: var(--space-2xs);
}

.itinerary-day__add-stop > summary,
.itinerary-day__add-leg > summary,
.itinerary-day__editor > summary,
.itinerary-add-stay > summary,
.itinerary-add-pass > summary,
.itinerary-duplicate > summary {
  padding-block: var(--space-3xs);
  cursor: pointer;
  font-family: "Avenir Next", Avenir, "Century Gothic", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.itinerary-day__add-stop[open] > summary,
.itinerary-day__add-leg[open] > summary,
.itinerary-day__editor[open] > summary {
  margin-bottom: var(--space-2xs);
  color: var(--ink);
}

.itinerary-item-form {
  padding: var(--space-s) 0 var(--space-s) var(--space-s);
  border-left: 2px solid var(--line);
}

/* ---- Stays, passes, costs -------------------------------------------- */

.itinerary-stay,
.itinerary-pass {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
}

.itinerary-stay__name,
.itinerary-pass__name {
  font-size: 1rem;
}

.itinerary-stay__dates,
.itinerary-stay__nights,
.itinerary-stay__room,
.itinerary-stay__payment,
.itinerary-stay__cancellation,
.itinerary-stay__access,
.itinerary-pass__dates,
.itinerary-pass__days {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.itinerary-stay__amount,
.itinerary-pass__amount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.itinerary-stay-empty,
.itinerary-pass-empty,
.itinerary-library__count {
  margin: 0;
  color: var(--ink-soft);
}

.itinerary-cost-table {
  margin: 0;
}

.itinerary-cost-table > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-3xs);
}

.itinerary-cost-table dt,
.itinerary-cost-table dd {
  margin: 0;
}

.itinerary-cost-table dd {
  font-variant-numeric: tabular-nums;
}

.itinerary-cost-table__total {
  margin-top: var(--space-3xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--ink);
  font-weight: 500;
}

/* ---- Index ----------------------------------------------------------- */

.itinerary-list {
  padding-bottom: var(--space-m);
}

.itinerary-start {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.itinerary-start > summary { min-height: 1.5rem; color: var(--accent); font-size: 0.85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.itinerary-start .itinerary-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.itinerary-start .itinerary-form > .flash { grid-column: 1 / -1; }
.itinerary-start .itinerary-form__row { padding: 0; gap: 0.5rem; }
.itinerary-start .itinerary-form__row label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.itinerary-start :is(input:not([type="submit"]), select) { width: 100%; min-height: 2.75rem; padding: 0.65rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.itinerary-start .primary-button { align-self: end; }

.itinerary-library-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.itinerary-share-link {
  margin-top: var(--space-2xs);
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Phone ----------------------------------------------------------- */

@media (max-width: 40rem) {
  .itinerary-start .itinerary-form { grid-template-columns: 1fr; }
  .itinerary-start :is(input, select) { font-size: 1rem; }
  .itinerary-item,
  .itinerary-stay,
  .itinerary-pass {
    /* Stacked, because a row of content plus its controls cannot sit on one
       line at this width without either wrapping badly or scrolling. */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3xs);
  }

  .itinerary-item__amount,
  .itinerary-stay__amount,
  .itinerary-pass__amount {
    margin-left: 0;
  }

  .itinerary-day + .itinerary-day {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
  }
}