/* ==========================================================================
   Itinerary

   A page read one-handed, in an airport, under time pressure. Everything here
   serves one question: what is next, and what will they ask me for. So the
   reference is set in the mono face at full contrast, the prose that explains
   it is muted, and a booking that is done leaves the flow entirely.

   The checkbox itself lives in style.css, shared with the packing list.
   ========================================================================== */

.itin-progress {
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding-block: var(--sp-3);
  border-block: 1px solid var(--rule);
  margin-block: var(--sp-5) 0;
}

/* Two states worth calling out on a page carried through airports: the ticks
   have not reached the database, or the list on screen is the cached one. */
.itin-progress--offline::after {
  content: " Offline, so this is the last list that reached this phone.";
  color: var(--accent-strong);
}

.itin-progress--stale::after {
  content: " Showing the cached list. It could not be checked just now.";
  color: var(--accent-strong);
}

/* --- A day ---------------------------------------------------------------- */

.itin-day {
  padding-block: var(--sp-6) 0;
}

.itin-day__date {
  font-family: var(--font-display);
  font-size: var(--step-1);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule-strong);
}

.itin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- An item -------------------------------------------------------------- */

.itin-item {
  border-bottom: 1px solid var(--rule);
}

.itin-item__row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-4);
}

/* The checkbox centres on a single row of text elsewhere. Here the item is a
   block, so it pins to the first line instead of floating to the middle of a
   tall entry. */
.itin-item .packing-check {
  margin-top: calc((2.75rem - 1.15rem) / -2);
}

.itin-item__main {
  flex: 1 1 auto;
  min-width: 0;
}

.itin-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.itin-item__time {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--fg);
}

.itin-item__kind {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.itin-item__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}

/* --- The facts ------------------------------------------------------------
   The reason the page exists. A two-column list on anything wider than a
   phone, stacked below that, and the value always in the mono face because
   every one of them is read aloud to somebody at a desk. */

.itin-facts {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-3);
}

.itin-facts dt {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding-top: 0.15em;
}

.itin-facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg);
  overflow-wrap: anywhere;
}

@media (max-width: 29.99rem) {
  .itin-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .itin-facts dt {
    padding-top: var(--sp-2);
  }
}

.itin-item__note {
  color: var(--fg-muted);
  font-size: var(--step--1);
  max-width: var(--measure);
}

/* --- The document --------------------------------------------------------- */

.itin-doc {
  margin-top: var(--sp-3);
}

.itin-doc__button {
  font: inherit;
  font-size: var(--step--1);
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--rule-strong);
  padding: var(--sp-2) var(--sp-3);
  min-height: 2.75rem;
  cursor: pointer;
}

.itin-doc__button:hover {
  border-color: var(--fg-muted);
}

.itin-doc__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Done ----------------------------------------------------------------- */

/* Still legible, and out of the way. An item that has moved to Completed is
   collapsed to its heading line: the facts are still there for anyone who
   opens the section, but they stop competing with what is still to come. */
.itin-item--done .itin-item__title {
  color: var(--fg-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  font-size: var(--step-0);
  margin-bottom: 0;
}

.itin-item--done .itin-facts,
.itin-item--done .itin-item__note,
.itin-item--done .itin-doc,
.itin-item--done .link-list {
  display: none;
}

.itin-done {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--rule-strong);
}

.itin-done__title {
  margin: 0;
}

.itin-done__toggle {
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--step-1);
  background: none;
  border: none;
  color: var(--fg-muted);
  padding: var(--sp-4) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
}

.itin-done__toggle::before {
  content: "";
  inline-size: 0.45em;
  block-size: 0.45em;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-quart);
}

.itin-done__toggle[aria-expanded="true"]::before {
  transform: rotate(-135deg);
}

.itin-done__toggle:hover {
  color: var(--fg);
}

.itin-done__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.itin-plans {
  margin-top: var(--sp-6);
}

/* --- Print ----------------------------------------------------------------
   The backup. Paper has no session and no network, so it carries everything:
   every item, every fact, whether or not the screen has folded it away. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .itin-progress,
  .itin-doc,
  .packing-check,
  .itin-done__toggle::before {
    display: none !important;
  }

  .itin-item,
  .itin-day {
    break-inside: avoid;
  }

  /* Ticked on screen is still packed in the case. Paper shows it all. */
  .itin-item--done .itin-facts,
  .itin-item--done .itin-item__note {
    display: grid;
  }

  .itin-item--done .itin-item__title {
    text-decoration: none;
    color: #000;
  }

  .itin-facts dd {
    color: #000;
  }
}