/* ==========================================================================
   Packing

   A ruled list, not a card stack. The page has one job, so it borrows the
   dossier's furniture rather than inventing any: hairline rules, the neutral
   ramp, and the accent only on the thing you press.

   Nesting is drawn with a rule down the left of the child list rather than
   indentation alone. Indentation alone stops reading as structure past the
   second level, and a packing list goes three deep the moment a camera bag
   holds two lenses.
   ========================================================================== */

.packing {
  padding-block: var(--sp-6) var(--sp-8);
}

/* --- Add field ----------------------------------------------------------- */

.packing-add {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  max-width: 44rem;
}

/* display:flex above outruns the user agent's [hidden] rule, which is what
   keeps every nested field on the page folded away until its row asks for
   one. Without this the list draws an Add field under every item. */
.packing-add[hidden] {
  display: none;
}

.packing-add__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--fg);
  /* 16px floor rather than the fluid --step-0, which lands under it on a
     phone. iOS Safari zooms the page when you focus an input smaller than
     that, and this field is used one-handed over an open suitcase. */
  font-size: max(16px, var(--step-0));
  transition: border-color var(--dur-fast) var(--ease-quart);
}

.packing-add__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.packing-add__input:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
}

.packing-add__input::placeholder {
  color: var(--fg-subtle);
}

.packing-add__submit {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 620;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quart);
}

.packing-add__submit:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.packing-add--child {
  margin: var(--sp-2) 0 var(--sp-3);
}

.packing-add--child .packing-add__input {
  font-size: max(16px, var(--step--1));
}

/* --- Count and status ---------------------------------------------------- */

/* The count and the toggle read as one line of instrumentation over the list:
   what is done, and whether the done are on screen. */
.packing-meta {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.packing-count {
  color: var(--fg-subtle);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.packing-toggle {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--fg-muted);
  font-size: var(--step--1);
  cursor: pointer;
  user-select: none;
}

.packing-toggle:hover {
  color: var(--fg);
}

.packing-toggle__input {
  width: 1em;
  height: 1em;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.packing-status {
  min-height: 1.4em;
  margin-top: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--step--1);
}

/* --- The list ------------------------------------------------------------ */

.packing-list {
  margin-top: var(--sp-4);
}

.packing-list--nested {
  margin: 0 0 var(--sp-2) var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--rule);
  margin-top: 0;
}

.packing-item {
  border-top: 1px solid var(--rule);
}

.packing-list--nested > .packing-item:first-child {
  border-top: none;
}

/* Centred rather than baseline-aligned: a checkbox has no baseline worth
   sharing, and lining one up against text by eye means nudging it in pixels
   that break the moment the type scale moves. */
.packing-item__row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
}

.packing-item__label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: text;
}

.packing-item__label:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
}

/* Packed, and still legible. Mid grey with a line through it says done in the
   one glance this page gets, and dropping the ink back leaves the contrast to
   what is still outstanding.

   The rule takes currentColor rather than a lighter token. Struck through in
   a paler tone than the word it crosses, it read as a smudge over the text
   instead of a line through it. */
.packing-item--packed > .packing-item__row > .packing-item__label {
  color: var(--fg-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

/* --- Renaming ------------------------------------------------------------ */

.packing-item__edit {
  display: flex;
  flex: 1 1 auto;
  gap: var(--sp-3);
  align-items: center;
  min-width: 0;
}

.packing-item__edit-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 var(--sp-1);
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  color: var(--fg);
  font-size: max(16px, var(--step-0));
}

.packing-item__edit-input:focus {
  outline: none;
}

.packing-item__edit-input:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
}

.packing-item__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--sp-3);
  align-items: baseline;
}

/* Quiet until wanted: the list is for reading, and every row carrying two
   lit buttons turns it into a control panel. They come up to full contrast
   on hover, on focus, and on any touch device, where hover never arrives. */
.packing-item__action {
  padding: 0;
  background: none;
  border: none;
  color: var(--fg-subtle);
  font-size: var(--step--1);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.18em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-quart);
}

.packing-item__row:hover .packing-item__action,
.packing-item__action:focus-visible {
  color: var(--fg-muted);
}

.packing-item__action:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

@media (hover: none) {
  .packing-item__action {
    color: var(--fg-muted);
  }
}

/* The armed state of Remove. It names what it is about to take, so it needs
   to read as the loudest thing in the row. */
.packing-item__action--confirm,
.packing-item__row:hover .packing-item__action--confirm {
  color: var(--accent-strong);
  font-weight: 620;
  text-decoration-color: currentColor;
}

.packing-item__pending {
  color: var(--fg-subtle);
  font-size: var(--step--1);
  font-style: italic;
}

/* --- Empty and failed ---------------------------------------------------- */

.packing-empty {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.packing-fatal code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 34rem) {
  .packing-item__row {
    flex-direction: column;
    gap: var(--sp-2);
    align-items: flex-start;
  }

  .packing-list--nested {
    margin-left: var(--sp-2);
    padding-left: var(--sp-3);
  }
}