/* Packing Lists */
/* ============= */
/*
  The saved packing lists: an index of lists, and the list itself as rows of gear grouped
  by category. Mobile-first like the calendar - the base rules are the phone layout and the
  >=768px block widens it - and built from the same theme variables, so both follow the
  reader's chosen theme rather than a palette of their own.
*/


/* Index */
/* ===== */
.packing-lists__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.packing-list-card {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;

  padding: 0.875rem 1rem;

  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.875rem;

  color: inherit;
  text-decoration: none;
}

.packing-list-card:hover,
.packing-list-card:focus-visible {
  border-color: var(--pg-accent, var(--bs-primary));
}

/* Done with, and kept only as history - so it sits back from the open lists above it. */
.packing-list-card--closed {
  opacity: 0.7;
}

.packing-list-card--complete {
  border-color: var(--bs-success-border-subtle);
}

.packing-list-card__header {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.packing-list-card__name {
  margin: 0;

  font-size: 1.0625rem;
  font-weight: 600;

  color: var(--bs-emphasis-color);
}

/* Drift, said on the card so it is noticed without opening every list in turn. */
.packing-list-card__changes {
  margin-left: auto;
  color: var(--bs-warning-text-emphasis);
}

.packing-list-card__meta,
.packing-list-card__summary {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.375rem;

  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.packing-list-card__summary--muted {
  font-style: italic;
}

/* Gear in the bag that shouldn't be. The only note a card carries, so it can afford to
   look like something needing attention rather than like more description. */
.packing-list-card__summary--alert {
  font-weight: 600;
  color: var(--bs-danger-text-emphasis);
}


/* Archive */
/* ------- */
.packing-lists__archive {
  margin-top: 1.5rem;
}

.packing-lists__archive-summary {
  padding: 0.5rem 0;

  font-size: 0.875rem;
  font-weight: 600;

  color: var(--bs-secondary-color);
  cursor: pointer;
}

.packing-lists__archive-count {
  margin-left: 0.25rem;

  padding: 0.0625rem 0.4375rem;

  background-color: var(--bs-secondary-bg);
  border-radius: 999px;

  font-size: 0.75rem;
}

.packing-lists__archive > .packing-lists__grid {
  margin-top: 0.75rem;
}


/* Progress */
/* ======== */
.packing-list-progress {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.packing-list-progress__bar {
  height: 0.375rem;

  background-color: var(--bs-secondary-bg);
  border-radius: 999px;

  overflow: hidden;
}

.packing-list-progress__fill {
  height: 100%;

  background-color: var(--pg-accent, var(--bs-primary));
  border-radius: inherit;

  transition: width 0.25s ease;
}

.packing-list-progress__label {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.packing-list-progress__outstanding {
  color: var(--bs-tertiary-color);
}

.packing-list-progress--large {
  margin-top: 0.5rem;
}

.packing-list-progress--large .packing-list-progress__bar {
  height: 0.5rem;
}


/* The list itself */
/* =============== */
/* Kept tight against the filter strip below it: the header and the filters are both
   chrome for the list, and the run of space between them read as a gap in the page. */
.packing-list__header {
  margin-bottom: 0.25rem;
}

/* Standing off the filter strip above it by the same 1rem it leaves under itself, half of
   which the strip's own margin already gives. Carried on the wrapper the streams update
   inside, so it holds whether or not there is a banner to draw. */
.packing-list__changes .pg-notice {
  margin-top: 0.5rem;
}

.packing-list__name {
  margin: 0;

  font-size: 1.375rem;
  font-weight: 700;

  color: var(--bs-emphasis-color);
}

/* Renaming in place. The heading and the field swap, and are sized alike so the line
   neither jumps nor reflows the page under the thumb when the pencil is pressed. */
.packing-list__title-display {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}

.packing-list__title-form {
  display: none;

  align-items: center;
  column-gap: 0.25rem;
}

.packing-list__title--editing .packing-list__title-display {
  display: none;
}

.packing-list__title--editing .packing-list__title-form {
  display: flex;
}

.packing-list__name-field {
  flex: 1 1 auto;
  min-width: 0;

  padding: 0 0.375rem;

  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);

  background-color: var(--bs-body-bg);
  color: var(--bs-emphasis-color);

  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}

.packing-list__name-field:focus-visible {
  outline: 0;
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* Small, quiet and square - these sit on the title itself, so they answer to it rather
   than competing with the buttons on the bar above. */
.packing-list__title-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 2rem;
  height: 2rem;
  padding: 0;

  border: 0;
  border-radius: var(--bs-border-radius);

  background-color: transparent;
  color: var(--bs-secondary-color);

  font-size: 0.9375rem;

  cursor: pointer;
}

.packing-list__title-action:hover,
.packing-list__title-action:focus-visible {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.packing-list__title-action--save {
  color: var(--pg-accent);
}

.packing-list__title-action--save:hover,
.packing-list__title-action--save:focus-visible {
  color: var(--pg-accent);
}

.packing-list__meta {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  margin-top: 0.25rem;

  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.packing-list__closed-badge {
  padding: 0.0625rem 0.5rem;

  background-color: var(--bs-secondary-bg);
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The events the list covers, behind their count: what it is for, at a glance. */
.packing-list__events {
  margin-top: 0.25rem;
}

/* Reads as a count first and a control second: on most visits the number is all that is
   wanted, and opening it is the exception. */
.packing-list__events-summary {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;

  font-size: 0.8125rem;
  font-weight: 600;

  color: var(--bs-secondary-color);
  cursor: pointer;
}

.packing-list__events-summary:hover {
  color: var(--bs-emphasis-color);
}

/* The itinerary */
/* ------------- */
/* A date column down the left, the events of that day stacked beside it. Shared by the
   list's own event panel and the create screen's "Packing for", which ask the same
   question of the same events.

   Sized by what it holds, on both. On the list it is an aside above the packing itself,
   but the panel it sits in is already closed by default once there are more than a few
   events - so the collapse keeps a long trip off the screen, and a cap on top of it only
   made an opened panel scroll inside a page that scrolls. */
.packing-itinerary {
  margin: 0.5rem 0 0;
  padding: 0.375rem 0.5rem;

  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);

  list-style: none;
}

.packing-itinerary__day {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  column-gap: 0.5rem;

  padding: 0.25rem 0;
}

.packing-itinerary__day + .packing-itinerary__day {
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* The date sits at the top of its day rather than centred against it, so a day with three
   events still lines up with the first of them. */
.packing-itinerary__date {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;

  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.packing-itinerary__events {
  margin: 0;
  padding: 0;

  list-style: none;
}

.packing-itinerary__event {
  display: flex;
  align-items: baseline;
  column-gap: 0.375rem;

  font-size: 0.75rem;
  line-height: 1.4;

  color: var(--bs-body-color);
}

.packing-itinerary__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* How far a multi-day event runs. Sits with the title rather than in the date column,
   because the column says when the event starts and this is a property of the event. */
.packing-itinerary__span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;

  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.packing-itinerary__span .bi {
  font-size: 1em;
}

.packing-itinerary__time {
  flex: 0 0 auto;

  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}


/* Filters */
/* ======= */
/* The same segmented control as the calendar's List/Month switch - a row of options in a
   shared trough, the active one filled with the accent - because it is the same kind of
   thing: one choice among a few, not several separate buttons.

   The sticky band is the outer element and the trough is inside it, so the page scrolls
   behind a solid strip rather than showing through the trough's rounded corners. Sticky
   because "what's left to wash" is asked from halfway down a long list as often as from
   the top of it. */
.packing-list-filters {
  position: sticky;
  top: 0;
  z-index: 5;

  margin-bottom: 0.5rem;
  padding: 0.375rem 0;

  background-color: var(--bs-body-bg);
}

.packing-list-filters__group {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 0.1875rem;

  padding: 0.1875rem;

  background-color: var(--bs-secondary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.5625rem;

  /* Five options don't fit a phone; they scroll rather than wrap, so the strip keeps one
     row's height whatever it holds. */
  overflow-x: auto;
  scrollbar-width: none;
}

.packing-list-filters__group::-webkit-scrollbar {
  display: none;
}

/* The count sits on the label's baseline rather than centred against it: two different
   sizes centred on each other read as a word with a superscript stuck to it. The line
   height is the chip's own height, so lining the two up by baseline still leaves them
   centred in the chip. */
.packing-list-filters__option {
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.3125rem;

  flex: 1 0 auto;

  min-height: 1.75rem;
  line-height: 1.75rem;
  padding: 0 0.75rem;

  border-radius: 0.4375rem;

  color: var(--bs-secondary-color);

  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.packing-list-filters__option:hover {
  color: var(--bs-emphasis-color);
}

.packing-list-filters__option--active,
.packing-list-filters__option--active:hover {
  background-color: var(--pg-accent);
  color: var(--pg-accent-contrast);
}

.packing-list-filters__count {
  font-size: 0.6875rem;
  opacity: 0.75;
}

/* The narrow tier - the same one the control bar and the calendar's own strip switch at,
   rather than the 768px this file uses to widen the layout. These are controls running out
   of room across the width, which happens well before the layout has room to change. */
@media (width <=576px) {
  .packing-list-filters__option {
    padding: 0 0.5rem;
  }

  /* Down to the icon, so the bar's four controls stay on one row rather than wrapping to
     a second. Square, so what is left doesn't sit wider than it is tall. The icon-only
     collapse itself (.packing-list__bar-action / __text) is shared with the calendar's
     Today button - see control_bar.css. */
}


/* Category groups */
/* =============== */
.packing-list-group {
  margin-bottom: 0.875rem;

  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.875rem;

  overflow: hidden;
}

.packing-list-group__title {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  margin: 0;
  padding: 0.625rem 0.875rem;

  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  color: var(--bs-secondary-color);
  cursor: pointer;
}

.packing-list-group__count {
  margin-left: auto;

  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Everything in it is packed, so it folds itself away and keeps what's left in reach. */
.packing-list-group--done > .packing-list-group__title {
  color: var(--bs-success-text-emphasis);
}

/* Not a category at all: the things that shouldn't be in the bag. Amber throughout - ring,
   heading and rows - like the changes banner above it and the calendar's unassigned events:
   gear that has to come back out is something to see to, not something that has failed, and
   a red panel inside an amber ring read as two warnings arguing. */
.packing-list-group--removed {
  border-color: var(--bs-warning);
}

.packing-list-group--removed .packing-list-group__title {
  color: var(--bs-warning-text-emphasis);
}

.packing-list-group__rows {
  display: flex;
  flex-direction: column;
}


/* Rows */
/* ==== */
/* Ruled off from whatever is above it - the row before it, or the category title. The first
   row keeps its rule rather than losing it: the title is a band of its own, and without the
   line it floated over rows that were all ruled off from each other. Carried by the row and
   not by the title, so a collapsed group doesn't leave a line under a heading with nothing
   beneath it. */
.packing-list-row {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;

  padding: 0.625rem 0.875rem;

  border-top: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

.packing-list-row--packed {
  background-color: var(--bs-success-bg-subtle);
}

/* No longer wanted by any event on the list - amber, like the ring and heading around it,
   so it reads as something to see to rather than as progress. */
.packing-list-row--removed {
  background-color: var(--bs-warning-bg-subtle);
}

.packing-list-row__thumbnail {
  flex: 0 0 auto;
}

/* Says it opens before it is tapped, which a thumbnail at this size otherwise doesn't. */
.packing-list-row__thumbnail a {
  display: block;
  cursor: zoom-in;
}

.packing-list-row__image {
  display: block;

  width: 3rem;
  height: 3rem;

  object-fit: cover;

  border-radius: 0.5rem;
}

.packing-list-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.packing-list-row__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.375rem;
}

.packing-list-row__reference {
  font-weight: 600;
  color: var(--bs-emphasis-color);
}

.packing-list-row__description {
  font-size: 0.75rem;
  color: var(--bs-tertiary-color);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packing-list-row__badge {
  padding: 0.0625rem 0.4375rem;

  border-radius: 999px;

  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.packing-list-row__badge--new {
  background-color: var(--pg-accent, var(--bs-primary));
  color: var(--pg-accent-contrast, #fff);
}

/* Which of the list's events want this - the reason one row can stand for several events. */
/* Stacked so the dates make a column, and held together by a rail down their left. The
   rail is doing the work the chips used to: without it these are simply more grey lines
   under a grey description, and the row reads as a paragraph rather than as an item with
   a reason attached. */
.packing-list-row__events {
  display: flex;
  flex-direction: column;
  row-gap: 0.125rem;

  margin-top: 0.375rem;
  padding-left: 0.5rem;

  border-left: 0.125rem solid var(--bs-border-color);

  font-size: 0.6875rem;
}

/* Just wide enough for "17 Aug", so the date and the event read as one phrase. The old
   column was set for the longest date there could be and left the two floating apart. */
.packing-list-row__event {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  column-gap: 0.375rem;
}

/* The event's name is the part that identifies it; the date is context, so it sits back
   rather than leading in bold - it was the loudest thing on the row for being the least
   important. Tabular figures so the column doesn't waver between "1 Sep" and "17 Aug". */
.packing-list-row__event-date {
  color: var(--bs-tertiary-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.packing-list-row__event-title {
  min-width: 0;

  color: var(--bs-secondary-color);
  overflow-wrap: anywhere;
}

.packing-list-row__actions {
  flex: 0 0 auto;
}

.packing-list-row__action-form,
.packing-list-row__status-form {
  margin: 0;
}

.packing-list-row__status-form {
  display: block;
  width: 100%;
}


/* Status control */
/* -------------- */
/* Carries the chrome buttons' metrics - radius, size, weight - so the one control on a row
   belongs to the same family as the controls on the bars above it. Its own class rather
   than .pg-button because it reports a state as much as it invites a press. */
.packing-list-row__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.375rem;

  /* One width for every status, set by the longest of them, so a column of rows has a
     straight edge down its right and changing a status doesn't resize the control under
     the thumb that just pressed it. The four labels are within a character of each other,
     so this is only a little wider than the widest of them. */
  min-width: 7rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;

  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.5625rem;

  font-size: 0.75rem;
  font-weight: 700;

  color: var(--bs-emphasis-color);
  white-space: nowrap;
}

/* The caret sits at the far edge rather than trailing the label: the buttons are all one
   width, so a caret that followed the text would land in a different place on each row.
   Doubled up with the toggle class to beat the shared caret's own margin, whatever order
   the stylesheets happen to be served in. */
.packing-list-row__status.pg-dropdown-toggle--caret::after {
  margin-left: auto;
}

.packing-list-row__status:hover {
  background-color: var(--bs-secondary-bg);
}

/* Packed is the only one that reads as done; the three pendings are all still work, and
   are told apart by their icon and label rather than by three more colours. */
.packing-list-row__status--packed {
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}

.packing-list-row__status--static {
  opacity: 0.75;
}

.packing-list-row__status-option {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;

  width: 100%;

  text-align: left;
}

.packing-list-row__status-option--current {
  font-weight: 700;
}


/* Create / rename form, and the events it reads back */
/* ================================================== */
/* Full width, like the index and the list itself - a form of two blocks held to 40rem read
   as a narrow column pinned to the left of a wide screen, with the itinerary box stopping
   short of everything around it. */
.packing-list-form__title {
  margin-bottom: 1rem;

  font-size: 1.25rem;
  font-weight: 700;
}

/* Heads the events the same way the field above it is headed. A heading by tag, because
   it does title a section of the page - but on this form it is one of two labels over two
   blocks, and reading as an eyebrow while its neighbour read as a form label made the two
   look like different kinds of thing. */
.packing-list-form__subtitle {
  margin-bottom: 0.5rem;

  font-size: 1rem;
  font-weight: 400;

  color: var(--bs-body-color);
}

/* Wide layout */
/* =========== */
@media (min-width: 768px) {
  .packing-lists__grid {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }

  .packing-list-row__image {
    width: 3.5rem;
    height: 3.5rem;
  }
}