/*
 * orderbox.css — 注文箱ポップ版モーダル(docs/feedback-2026-09-18.md §3)。
 *
 * market-pop.css と違い、こちらは元になる旧UIの構造CSSが style.css 側に
 * 存在しない(#orderbox-modal は index.html 新規追加)ので、構造(position/
 * flex/grid)と見た目(色・縁・影・角丸・フォント)の両方をこの1ファイルに
 * まとめる。サイズ・余白・色は全て src/pop-tokens.css の --pop-* トークンを
 * 参照する契約。
 *
 * クラスは ob- 前置き。#orderbox-modal 自身のstructural(fixed/flex中央寄せ)
 * は #market-modal/#resident-dialog と同じパターン(style.css参照)。
 */

#orderbox-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 60, 80, 0.28);
  z-index: 44;
  pointer-events: auto;
}

#orderbox-panel {
  width: min(var(--pop-modal-w), 92vw, calc(100% - var(--pop-modal-inset)));
  max-width: var(--pop-modal-w);
  max-height: var(--pop-modal-max-h);
  display: flex;
  flex-direction: column;
  background: var(--pop-cream);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
}

/* -- header -- */
#orderbox-header {
  display: flex;
  align-items: center;
  gap: var(--pop-space-3);
  padding: var(--pop-space-3) var(--pop-space-4);
  height: var(--pop-header-h);
  background: var(--pop-yellow);
  border-bottom: var(--pop-border) solid var(--pop-ink);
  flex: none;
}
#orderbox-title {
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-title);
  color: var(--pop-ink);
  margin-right: auto;
}
#orderbox-wallet {
  display: inline-flex;
  align-items: center;
  padding: var(--pop-space-1) var(--pop-space-3); /* §fix(review item8): was hard-coded 4px 12px */
  border-radius: 99px;
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  box-shadow: 0 2px 0 var(--pop-ink);
  font-family: var(--pop-font-display);
  font-weight: 800;
  color: #a34a00;
  font-variant-numeric: tabular-nums;
  font-size: var(--pop-fs-price);
  transition: transform 0.12s;
}
#orderbox-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pop-icon-sm);
  height: var(--pop-icon-sm);
  border-radius: var(--pop-radius-sm);
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  color: var(--pop-ink);
  flex: none;
}
/* §fix(review item8): was a literal 18px (56% of the old fixed 32px icon) —
   kept proportional to --pop-icon-sm so the svg scales with it under
   desktop/touch instead of drifting from the box that contains it. */
#orderbox-box-icon svg { width: 56%; height: 56%; }
#orderbox-close {
  font-family: var(--pop-font-display);
  font-weight: 800;
  background: var(--pop-coral);
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 4px 0 var(--pop-ink);
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--pop-fs-btn);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#orderbox-close:hover { filter: brightness(1.05); }
#orderbox-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }

/* -- order list -- */
#orderbox-list {
  flex: 1;
  min-height: 0;
  /* §fix(2026-09-18 landscape redesign): orders are always exactly 2/day and
     each card is now sized to guarantee both fit without scrolling — this
     used to be overflow-y:auto, which on touch/landscape (short viewport)
     clipped/scrolled the 2nd card. visible + cards sized to fit is the
     contract now; see .ob-card sizing below and the body.touch block. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  background: var(--pop-cream);
}
.ob-empty {
  color: var(--pop-muted);
  font-weight: 700;
  text-align: center;
  padding: var(--pop-space-6) 0;
}

/* §fix(2026-09-18 landscape redesign): card sizing is now local to orderbox
   (literal px, not --pop-card-*) — those tokens are shared with market's
   small grid tiles (docs/pop-tokens.css header comment) and this card is a
   full-width list row, a different shape entirely; reusing the token would
   mean tuning this layout could accidentally resize market cards too. */
.ob-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 90px;
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  box-shadow: 0 3px 0 var(--pop-ink);
}
.ob-card-done { opacity: 0.6; }

.ob-card-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pop-radius-sm);
  background: #e4f7f5;
  border: var(--pop-border-thin) solid var(--pop-ink);
  color: var(--pop-ink);
}
.ob-card-icon svg { width: 60%; height: 60%; }

.ob-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pop-space-2);
}
.ob-card-text {
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: var(--pop-ink);
}

/* §fix(2026-09-18 landscape redesign): wraps .ob-card-pips + .ob-card-chips
   (siblings in the markup) so the touch/landscape block below can turn just
   those two into a single inline row ("chips inline to the right of pips")
   without disturbing .ob-card-text above them. */
.ob-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pop-space-3);
}

.ob-card-pips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pop-pip-gap); /* §fix(review item8): was hard-coded 6px */
}
.ob-pip {
  width: var(--pop-pip-size);
  height: var(--pop-pip-size);
  /* §fix(review item8): kept proportional to --pop-pip-size (was a fixed
     4px, 1/4 of the old fixed 16px) rather than a fourth new token. */
  border-radius: calc(var(--pop-pip-size) / 4);
  border: var(--pop-border-thin) solid var(--pop-ink);
  background: var(--pop-cream);
  flex: none;
  transition: transform 0.15s, background 0.15s;
}
.ob-pip-filled { background: var(--pop-lime); }
.ob-pip-pop { animation: ob-pip-pop 0.28s ease; }
.ob-pip-named {
  width: auto;
  height: auto;
  min-width: var(--pop-pip-size); /* §fix(review item8): was hard-coded 16px */
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--pop-fs-meta);
  font-weight: 700;
  color: var(--pop-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes ob-pip-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.ob-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pop-space-2);
}
.ob-chip {
  font-family: var(--pop-font-body);
  font-weight: 700;
  font-size: var(--pop-fs-meta);
  background: #e4f7f5;
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 36px; /* §fix(review item8): desktop floor — see body.touch override below for the 44px touch target */
  cursor: pointer;
  box-shadow: 0 2px 0 var(--pop-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.ob-chip:hover:not(:disabled) { filter: brightness(1.05); }
.ob-chip:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }
.ob-chip:disabled { opacity: 0.5; cursor: default; }
/* §fix(review item8): touch needs a real >=44px tap target (WCAG 2.5.5) —
   the 36px desktop floor above is fine for a mouse pointer but too small to
   reliably tap. */
body.touch .ob-chip { min-height: 44px; }

.ob-card-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--pop-space-2);
  min-width: 130px;
  align-self: stretch;
}
.ob-card-reward {
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-price);
  color: #a34a00;
  text-align: right;
}
.ob-primary-btn {
  font-family: var(--pop-font-display);
  font-weight: 800;
  background: var(--pop-yellow);
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 4px 0 var(--pop-ink);
  padding: 8px 18px;
  min-height: 44px;
  min-width: var(--pop-btn-min-w);
  cursor: pointer;
  font-size: var(--pop-fs-btn);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.ob-primary-btn:hover:not(:disabled) { filter: brightness(1.05); }
.ob-primary-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }
.ob-primary-btn:disabled {
  background: #e4f7f5;
  color: var(--pop-muted);
  opacity: 0.7;
  cursor: default;
  box-shadow: 0 4px 0 var(--pop-ink);
}
.ob-reason { font-size: var(--pop-fs-meta); font-weight: 800; color: #d8352a; }

/* §fix(2026-09-18 landscape redesign): the stamp used to be positioned
   absolute over the card's top-right corner regardless of content, which
   overlapped the reward text ("売値2倍") that also lived in that corner.
   orderbox.js now only emits the stamp INSTEAD OF the reward+button (see
   cardHtml()'s sideHtml), as a normal flex child of .ob-card-side, so it can
   never overlap anything — it just sits centered in the column the button
   would have used (side has justify-content:center, align-self:center below
   overrides the column's default right-alignment). */
.ob-stamp {
  align-self: center;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: #d8352a;
  border: var(--pop-border-thin) solid #d8352a;
  border-radius: var(--pop-radius-sm);
  padding: var(--pop-space-1) var(--pop-space-3);
  transform: rotate(-8deg);
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* -- footer: 今日の納品 --
   §fix(2026-09-18 landscape redesign): was a stacked title+list+total block
   (max-height:34vh, its own scrollbar) that ate ~40% of the modal on touch/
   landscape. Now a single slim row — label · inline log (one line, ellipsis)
   · total — that never scrolls. orderbox.js's logHtml() now emits the log
   entries + " ・ " separators inline instead of one <li> per line. */
#orderbox-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--pop-space-3);
  padding: 0 var(--pop-grid-pad);
  height: 48px;
  background: var(--pop-paper);
  border-top: var(--pop-border) solid var(--pop-ink);
  overflow: hidden;
}
#orderbox-log-title {
  flex: none;
  font-family: var(--pop-font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--pop-muted);
}
#orderbox-log {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  color: var(--pop-ink);
}
.ob-log-line,
.ob-log-sep,
.ob-log-empty { display: inline; }
.ob-log-sep { color: var(--pop-muted); }
.ob-log-empty { color: var(--pop-muted); }
#orderbox-log-total {
  flex: none;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: 14px;
  color: #a34a00;
  text-align: right;
  transition: transform 0.1s;
}
/* §feedback anim: the +¥N delivery feedback now also briefly highlights the
   footer total (previously it only animated the wallet pill), so the total
   visibly reacts even though it's tucked into the slim footer row. */
@keyframes ob-total-flash {
  0% { transform: scale(1); color: #a34a00; }
  35% { transform: scale(1.22); color: #2f7d3a; }
  100% { transform: scale(1); color: #a34a00; }
}
#orderbox-log-total.ob-total-flash { animation: ob-total-flash 0.5s ease; }

/* -- flying feedback elements (appended to <body>, position: fixed) -- */
.ob-fly-fish {
  position: fixed;
  z-index: 200;
  /* §fix(review item8): was a hard-coded 28px — reuses --pop-icon-sm so the
     flying icon visually matches the box icon it's flying towards, and
     scales with it under desktop/touch instead of drifting apart. */
  width: var(--pop-icon-sm);
  height: var(--pop-icon-sm);
  color: var(--pop-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.28s ease-in, opacity 0.28s ease-in;
  pointer-events: none;
}
.ob-fly-fish svg { width: 100%; height: 100%; }
.ob-fly-money {
  position: fixed;
  z-index: 200;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-price);
  color: #2f7d3a;
  transform: translate(-50%, 0);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  pointer-events: none;
}

@media (max-width: 700px) {
  .ob-card {
    flex-wrap: wrap;
  }
  .ob-card-side {
    width: 100%;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
  }
  .ob-primary-btn { flex: 1; }
}

/* §fix(2026-09-18 landscape redesign): touch/landscape (e.g. iPhone
   844x390) — same two-condition gate pop-tokens.css's own touch profile
   uses (body.touch + short viewport height), deliberately NOT gated on
   width so it still applies at 844px wide (>700px, misses the max-width
   query above). Every selector below targets `body.touch <concrete
   selector>` — no bare `:root` nested here, so none of these can silently
   turn into a no-op the way a nested `:root` would (see pop-tokens.css's own
   comment on that bug; this file never had that bug, but the fix is kept in
   mind for every rule added below). Orders are always exactly 2/day, so
   these sizes are tuned so both cards + the slim footer always fit within
   ~88vh of a ~390px-tall viewport without any scrolling. */
body.touch {
  @media (max-height: 480px) {
    #orderbox-panel {
      max-height: 88vh;
    }
    #orderbox-list {
      gap: 10px;
      padding: 12px 16px;
    }
    .ob-card {
      min-height: 76px;
      padding: 8px 12px;
      gap: 10px;
    }
    .ob-card-icon {
      width: 28px;
      height: 28px;
    }
    .ob-card-body { gap: 3px; }
    .ob-card-text {
      font-family: var(--pop-font-display);
      font-size: 15px;
      line-height: 1.2;
    }
    .ob-card-meta {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .ob-card-pips { font-size: 14px; }
    .ob-pip {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
    .ob-pip-named {
      min-width: 14px;
      font-size: 14px;
      padding: 1px 6px;
    }
    .ob-card-side {
      min-width: 120px;
      gap: 4px;
    }
    .ob-card-reward { font-size: 11px; }
    .ob-primary-btn {
      min-height: 44px;
      min-width: 120px;
      padding: 6px 14px;
      font-size: 13px;
    }
    #orderbox-footer { height: 42px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #orderbox-modal *, #orderbox-modal *::before, #orderbox-modal *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .ob-fly-fish, .ob-fly-money { display: none; }
}
/* body.reduced-motion (site's own toggle, distinct from the OS media query
   above) also skips the footer-total flash — orderbox.js's flashTotal()
   already checks reducedMotion() before adding the class, this is a CSS-only
   backstop for consistency with the other §feedback anim rules nearby. */
body.reduced-motion #orderbox-log-total.ob-total-flash { animation: none; }
body.reduced-motion .ob-fly-fish,
body.reduced-motion .ob-fly-money { display: none; }