/* ===========================================================================
   The journey panel.

   This site asks for something no other price site asks for: a list of
   categories and amounts rather than a product. Nothing on the page used to
   say so, and an arriving visitor met an empty box with a search field in it.

   The panel says how far the comparison can be trusted and what to do next,
   and that is all. It began as a three-step rail, which was a drawing of our
   pipeline rather than of anybody's path, and filled end to end on one tap.
   There is no bar here now. The number it reports, the chains we could price
   the whole list at, is a state and not a distance: it falls when a line goes
   in that only one chain carries, and a fill that only ever grew would have
   had to lie about that.

   Colour, type, spacing, radius and shadow all come from the tokens at the
   top of app.css. Nothing here defines a value of its own except the two
   component sizes that are called out with their reason.
   =========================================================================== */

.journey {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
}

/* --------------------------------------------- how far it can be trusted */
/* One sentence, in the page's own voice, with the counts in bold. There is no
   bar: the number it carries is a state rather than a distance, it can fall
   as easily as it can rise, and drawing it as a fill would say "you are this
   far along" about something nobody is travelling. */
.jstatus {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  color: var(--ink);
}
.jstatus b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* A comparison is on its way and the sentence on show belongs to the list as
   it was a moment ago. The results below behave the same way: the previous
   answer stays put rather than flashing off, and this says it is provisional
   without moving anything. */
.journey.is-stale .jstatus,
.journey.is-stale .jgap { opacity: .55; }

/* ------------------------------------------------- what to do next */
.jnext {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.jnext p { margin: 0; flex: 1 1 240px; font-size: var(--t-sm); line-height: var(--lh-ui); }
.jnext .btn { font-size: var(--t-sm); padding: var(--s-2) var(--s-3); }
.jgap {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  color: var(--muted);
}
.jgap b { font-weight: 700; color: var(--ink); }

/* The line that greets a basket the visitor did not build: a ready-made list
   is somebody else's shopping until it is handed over in words. */
.jloaded {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  background: var(--good-bg);
  color: var(--good-ink);
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  font-weight: 600;
}

/* ------------------------------------------------ the empty state's offer */
/* The ready-made baskets already live in a rail at the foot of the page,
   which on a phone is four screens below an empty box. A visitor with
   nothing in front of them needs the whole-list route where the decision is,
   not where the page ends. */
.jstart { margin: 0 0 var(--s-4); }
.jstart > p { margin: 0 0 var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.jstart-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jstart-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}
.jstart-btn:hover { border-color: var(--brand); text-decoration: none; }
.jstart-btn small { color: var(--muted); font-size: var(--t-xs); font-weight: 400; }

/* `hidden` loses to a display rule, and the basket toolbar is a flex row.
   It is hidden while the basket is empty: see `renderJourney`. */
.toolbar[hidden] { display: none; }

/* ------------------------------------------ a total that is not a total */
/* A chain we could not price on every line has a sum, and that sum is lower
   for covering less. Printed in the same weight and the same column as the
   ranked totals it read as the cheapest shop on the page, which is the exact
   opposite of what the comparison found. So the column says there is no
   total, and the figure moves inside the card where it can be labelled. */
.rank-head .cost.no-total {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}
.partial-sum {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.partial-sum b { color: var(--ink); }

/* -------------------------------------------------------- how it works */
/* Three numbered steps, on the page where somebody picks a ready-made list
   before they have ever used the tool. This is a description of a mechanism,
   under a heading that says so, and two of its three steps are things we do,
   which is right in an explanation. It was wrong when the basket page drew
   the same three as a path the visitor was walking, so the badges here mark
   an order and nothing fills, advances or completes. */
.journey.is-how {
  /* Enough for the badge column and the gap that follows it. */
  --jbadge: 22px;
  margin-bottom: var(--s-5);
}
.jhow-head {
  margin: 0 0 var(--s-3);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.journey.is-how .jrail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Badge in the first column down both rows, the label and its sentence
   stacked in the second. Auto-placement puts a third child back under the
   badge, which is a 22px column: the sentence then set one word per line and
   ran nine lines deep. */
.journey.is-how .jstep {
  display: grid;
  grid-template-columns: var(--jbadge) 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-2);
  align-items: start;
  min-width: 0;
}
.journey.is-how .jnum { grid-row: 1 / span 2; }
.journey.is-how .jlabel { grid-column: 2; grid-row: 1; }
.journey.is-how .jsub { grid-column: 2; grid-row: 2; }
.journey.is-how .jnum {
  width: var(--jbadge);
  height: var(--jbadge);
  align-self: start;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: var(--t-2xs);
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--brand);
  background: var(--brand-tint);
  color: var(--warn-ink);
}
.journey.is-how .jlabel {
  display: block;
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  font-weight: 700;
  color: var(--ink);
}
.journey.is-how .jsub {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  color: var(--muted);
}

/* The two lines over the ready-made grid: what the baskets are, and what
   picking one does. They belong to the heading above them, not to the grid. */
.jlead { margin: calc(var(--s-1) * -1) 0 var(--s-1); }
.jlead-end { margin: 0 0 var(--s-4); }

/* -------------------------------------------- the way back into the tool */
/* A landing page is three screens of tables. The button that turns it into
   your own basket sits above them, and by the time somebody has read the
   answer it is long gone. This brings it back, and only once it is gone:
   it duplicates an action already on the page and adds no urgency of its
   own. Under the cookie banner and the toast in the stack, because both of
   those are answers to something the visitor asked. */
.jopen-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.jopen-bar.is-on { transform: none; }
.jopen-bar small { font-size: var(--t-xs); color: var(--muted); }
body.has-jopen footer { padding-bottom: var(--s-7); }

/* --------------------------------------- the amount on a one-tap chip */
/* «Γάλα 1 λίτρο» rather than «Γάλα». The amount is the half of this site
   that no headline has ever managed to explain, and a chip that shows what
   the tap is about to put in the list teaches it without a sentence. */
.quick-amount {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .jopen-bar { transition: none; }
}