/* Drops (Phase 2, step 5): the drop card and jar (stall page and Order Board), and the
   "Post a drop" form. */

.drop {
  padding: var(--space-4);
  background: var(--surface);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--outline);
}

.page__body .drop h2,
.page__body .drop h3,
.drop__title { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.drop__note { margin: 0 0 var(--space-2); overflow-wrap: anywhere; white-space: pre-line; }
.drop__closes { margin: var(--space-2) 0; font-weight: 800; }
.drop__label { margin: var(--space-3) 0 var(--space-1); font-weight: 800; }

/* The jar: a bar that fills up. The numbers are always in words beside it. In the game look it
   has a lid, like a cookie jar lying on its side. */
.drop-jar { margin: var(--space-2) 0; }
.drop-jar__words { margin: var(--space-1) 0 0; }

.drop-jar__bar {
  position: relative;
  height: 1.25rem;
  background: var(--surface-sunk);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.drop-jar__fill {
  display: block;
  height: 100%;
  background: var(--accent-yellow);
  border-right: var(--outline-w) solid var(--outline);
  transition: width .6s ease;
}

.drop-jar__fill[style*="width: 0%"] { border-right: 0; }

:root:not([data-simple="on"]) .drop-jar__bar { margin-left: .6rem; overflow: visible; }

:root:not([data-simple="on"]) .drop-jar__bar::before {
  content: "";
  position: absolute;
  top: -.35rem;
  bottom: -.35rem;
  left: -.75rem;
  width: .55rem;
  background: var(--primary);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius-sm);
}

:root:not([data-simple="on"]) .drop-jar__fill { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }

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

/* Each dish's line: name and size, price, and how many are left. */
.page__body .drop__lines,
.page__body .drop__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.page__body .drop__lines li + li,
.page__body .drop__slots li + li { margin-top: 0; }

.drop__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-3);
  overflow-wrap: anywhere;
}

.drop__left { font-weight: 800; color: var(--success-text); }
.drop__left--none { color: var(--danger-text); }
.drop__actions { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

/* The "Post a drop" form. */
.post-drop__part { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 2px dashed var(--card-border); }
.post-drop__part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page__body .post-drop__part h2 { margin-top: 0; }

.page__body .post-drop__dishes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.page__body .post-drop__dishes li + li { margin-top: 0; }

.post-drop__dish {
  padding: var(--space-3);
  background: var(--surface);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}

.page__body .post-drop__dish h3 { margin: 0 0 var(--space-2); font-size: var(--fs-base); overflow-wrap: anywhere; }
.post-drop__size { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.post-drop__size + .post-drop__size { margin-top: var(--space-2); }
.post-drop__size label { overflow-wrap: anywhere; }
.post-drop__size .input { width: 6.5rem; }

.post-drop__when { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.post-drop__when .field { margin: 0; }

.post-drop__slot {
  padding: var(--space-3);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}

.post-drop__slot + .post-drop__slot { margin-top: var(--space-2); }
.post-drop__slot legend { font-weight: 800; }
.post-drop__slot-tools { margin-top: var(--space-2); }

.drop__back { margin: var(--space-5) 0 0; text-align: center; }
.drop__back a { display: inline-block; padding-block: .75rem; } /* a bigger tap area */
.post-drop .input--short { max-width: 11rem; }

/* "Drop open", with the "!" bubble (plan Section 9: like a quest marker). The words are always
   there; the bubble is decoration. */
.drop__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
}


:root[data-simple="on"] .drop__bang { display: none; }
.drop__actions .btn { text-align: center; }