/* ==========================================================================
   stock.css — 在庫マップ (public list + map) and the staff report page
   --------------------------------------------------------------------------
   Context stylesheet, loaded on the two stock pages only. Reads tokens
   only; the one exception is the chain icon, whose colour is a brand
   identity carried inline from PHP (Stock\ChainStyle) rather than a token.
   ========================================================================== */

.tcg-stock { max-width: 44rem; }

/* --- tabs --------------------------------------------------------------- */

.tcg-stocktabs,
.tcg-stockviews {
  display: flex;
  gap: var(--tcg-space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--tcg-space-sm);
}

/* The game's emoji above the set name: a reader hunting whatever dropped
   today tells ⚡ from 🏴‍☠️ without reading. */
.tcg-stocktabs__tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 5.5rem;
  font: inherit;
  font-weight: 700;
  font-size: var(--tcg-fs-sm, 0.875rem);
  padding: var(--tcg-space-xs) var(--tcg-space-sm);
  border: 1px solid var(--tcg-color-border);
  border-radius: var(--tcg-radius-md, 10px);
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  cursor: pointer;
}

.tcg-stocktabs__icon { font-size: 1.5rem; line-height: 1; }

.tcg-stocktabs__name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcg-storerow__icon--emoji { background: var(--tcg-color-surface-2, transparent); font-size: 1.2rem; }

.tcg-stocktabs__tab.is-on {
  background: var(--tcg-color-brand-soft);
  border-color: var(--tcg-color-brand);
  color: var(--tcg-color-brand);
}

.tcg-stockviews {
  border-bottom: 1px solid var(--tcg-color-border);
  gap: 0;
}

.tcg-stockviews__tab {
  flex: 1 1 0;
  font: inherit;
  font-size: var(--tcg-fs-sm, 0.875rem);
  padding: var(--tcg-space-xs) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tcg-color-text-muted);
  cursor: pointer;
}

.tcg-stockviews__tab.is-on {
  color: var(--tcg-color-brand);
  font-weight: 700;
  border-bottom-color: var(--tcg-color-brand);
}

.tcg-stock__status {
  font-size: var(--tcg-fs-sm, 0.875rem);
  color: var(--tcg-color-text-muted);
  margin: var(--tcg-space-xs) 0 var(--tcg-space-sm);
}

/* The line above the map: two lines reserved, so the opener, the located
   text and the no-location hint all sit in the same box and the map's top
   edge never moves (owner, 2026-10-31: no layout shifts). */
.tcg-stock__status--fixed { min-height: calc(2 * 1.5em); line-height: 1.5; }

/* --- store rows ----------------------------------------------------------- */

.tcg-storelist {
  list-style: none;
  margin: 0 0 var(--tcg-space-md);
  padding: 0;
}

.tcg-storerow,
.tcg-pick {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-sm);
  width: 100%;
  padding: var(--tcg-space-sm);
  margin-bottom: var(--tcg-space-xs);
  border: 1px solid var(--tcg-color-border);
  border-radius: var(--tcg-radius-md, 10px);
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  text-align: left;
}

.tcg-pick {
  font: inherit;
  cursor: pointer;
}

.tcg-pick.is-on {
  border-color: var(--tcg-color-brand);
  background: var(--tcg-color-brand-soft);
}

.tcg-storerow.is-sunk { opacity: 0.6; }

.tcg-storerow__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.tcg-storerow__lines {
  flex: 1 1 auto;
  min-width: 0;
}

.tcg-storerow__lines b {
  display: block;
  font-size: var(--tcg-fs-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcg-storerow__lines span {
  display: block;
  font-size: var(--tcg-fs-sm, 0.875rem);
  color: var(--tcg-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcg-storerow__lines span.is-unnamed { color: var(--tcg-color-text-faint); }

.tcg-storerow__dist {
  flex: 0 0 auto;
  font-size: var(--tcg-fs-sm, 0.875rem);
  color: var(--tcg-color-text-muted);
  white-space: nowrap;
}

.tcg-storerow__state {
  flex: 0 0 auto;
  text-align: right;
}

.tcg-storerow__sub {
  display: block;
  font-size: var(--tcg-fs-xs, 0.75rem);
  color: var(--tcg-color-text-muted);
  margin-top: 2px;
}

/* --- state pills ---------------------------------------------------------- */

.tcg-pill {
  display: inline-block;
  font-size: var(--tcg-fs-xs, 0.75rem);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--tcg-color-text-invert);
  white-space: nowrap;
}

.tcg-pill--in_stock    { background: var(--tcg-color-open-fg); }
.tcg-pill--sold_out    { background: var(--tcg-color-urgent-fg); }
.tcg-pill--not_yet     { background: var(--tcg-color-waiting-fg); }
.tcg-pill--none {
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text-muted);
  border: 1px solid var(--tcg-color-border);
}

.tcg-pill.is-faded { opacity: 0.55; }

.tcg-stock__legend {
  display: flex;
  gap: var(--tcg-space-xs);
  flex-wrap: wrap;
  margin: var(--tcg-space-md) 0;
}

.tcg-stock__credit {
  font-size: var(--tcg-fs-xs, 0.75rem);
  color: var(--tcg-color-text-faint);
}

/* --- map ------------------------------------------------------------------ */

.tcg-stockmap {
  position: relative;
  height: 70vh;
  min-height: 360px;
  border: 1px solid var(--tcg-color-border);
  border-radius: var(--tcg-radius-md, 10px);
  overflow: hidden;
  margin-bottom: var(--tcg-space-md);
}

/* The map's status (読み込んでいます… / the no-location hint / the zoom
   hint) as a pill over the map, top centre, so it never moves the layout.
   Click-through, and narrow enough to clear MapLibre's controls at the
   top right. Empty, it is not there at all. */
.tcg-mapstatus {
  position: absolute;
  top: var(--tcg-space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: calc(100% - 120px);
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text-muted);
  font-size: var(--tcg-fs-xs, 0.75rem);
  line-height: 1.4;
  text-align: center;
  opacity: 0.94;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.tcg-mapstatus:empty { display: none; }

/* Reporters: floats over the map, bottom left, clear of MapLibre's controls. */
.tcg-mapadd {
  position: absolute;
  left: var(--tcg-space-sm);
  bottom: var(--tcg-space-sm);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 「自分の報告」 stacks above 店を追加 on the same edge: two buttons side by
   side overflow a 375px map. */
.tcg-mapmine {
  position: absolute;
  left: var(--tcg-space-sm);
  bottom: calc(var(--tcg-space-sm) + 3rem);
  z-index: 2;
  background: var(--tcg-color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Stacking, so the reader can find themselves: pins below, the position
   dot above them, popups above everything. MapLibre orders markers by DOM
   order and re-appends whichever moved last, so without explicit z-index
   the dot sank under the pins each time the minute timer redrew them
   (owner, 2026-10-31: 「i sometimes have problems finding my self」). */
.tcg-mappin { z-index: 1; }
.tcg-stockmap .maplibregl-user-location-accuracy-circle { z-index: 0; pointer-events: none; }
.tcg-mapme,
.tcg-stockmap .maplibregl-user-location-dot { z-index: 3; }
.tcg-stockmap .maplibregl-popup { z-index: 4; }

.tcg-mappin {
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.tcg-mappin--none {
  background: #fff;
  color: #555;
  border: 1px solid #999;
}

/* Every tracked product with a current report at this store: its game's
   emoji on a dot in the state's colour, above the pill. The pill stays
   the anchored box, so the dots hang over it without moving the pin. */
.tcg-mappin__dots {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.tcg-mappin__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.tcg-mappin__dot--in_stock { background: #1f9d55; }
.tcg-mappin__dot--sold_out { background: #d64545; }
.tcg-mappin__dot--not_yet  { background: #d98b00; }
.tcg-mappin__dot.is-faded  { opacity: 0.6; }

.tcg-popup__other.is-faded { opacity: 0.6; }

/* The list rows: one pill per product with a current report. */
.tcg-storerow__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

/* The purchase limit badge, the grade line, and the line that says what
   a free reader is not shown. */
.tcg-limit {
  display: inline-block;
  font-size: var(--tcg-fs-xs, 0.75rem);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--tcg-color-border-strong);
  color: var(--tcg-color-text);
  white-space: nowrap;
}

.tcg-grade {
  font-size: var(--tcg-fs-xs, 0.75rem);
  color: var(--tcg-color-text-muted);
}

.tcg-popup__premium,
.tcg-storerow__premium {
  color: var(--tcg-color-text-faint);
  font-size: var(--tcg-fs-xs, 0.75rem);
}

.tcg-mappin--in_stock    { background: #1f9d55; }
.tcg-mappin--sold_out    { background: #d64545; }
.tcg-mappin--not_yet     { background: #d98b00; }
.tcg-mappin.is-faded     { opacity: 0.6; }
.tcg-mappin.is-sunk      { opacity: 0.5; border-style: dashed; }

/* MapLibre's popup ships white; our text colour is near-white in dark
   mode, so the store name was unreadable. Both halves follow the tokens. */
.tcg-stockmap .maplibregl-popup-content {
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  font-size: var(--tcg-fs-sm);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tcg-popup b { display: block; }
.tcg-popup span { display: block; color: var(--tcg-color-text-muted); font-size: var(--tcg-fs-xs, 0.75rem); }
.tcg-popup .tcg-btn { margin-top: var(--tcg-space-xs); width: 100%; }

.tcg-stockmap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--tcg-color-surface); }
.tcg-stockmap .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--tcg-color-surface); }
.tcg-stockmap .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--tcg-color-surface); }
.tcg-stockmap .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--tcg-color-surface); }

.tcg-mapme {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2b6cb0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #2b6cb0;
}

/* --- staff report page ---------------------------------------------------- */

.tcg-step { margin-bottom: var(--tcg-space-lg); }

.tcg-step__title {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-xs);
  font-size: var(--tcg-fs-lg, 1.125rem);
  margin: 0 0 var(--tcg-space-xs);
}

.tcg-step__num {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--tcg-color-brand);
  color: var(--tcg-color-brand-contrast);
  font-size: 0.8em;
}

.tcg-field { display: block; margin: var(--tcg-space-sm) 0; }
.tcg-field label { display: block; font-size: var(--tcg-fs-sm, 0.875rem); color: var(--tcg-color-text-muted); }

.tcg-input {
  display: block;
  width: 100%;
  font: inherit;
  /* iOS Safari zooms the page into any field whose text is under 16px the
     moment the keyboard opens, and does not zoom back out. 16px is the
     threshold; nothing smaller may be used here. */
  font-size: max(16px, 1rem);
  padding: var(--tcg-space-xs) var(--tcg-space-sm);
  border: 1px solid var(--tcg-color-border-strong);
  border-radius: var(--tcg-radius-md, 10px);
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  margin-top: 4px;
}

.tcg-addstore {
  padding: var(--tcg-space-sm);
  border: 1px dashed var(--tcg-color-border-strong);
  border-radius: var(--tcg-radius-md, 10px);
  margin: var(--tcg-space-sm) 0;
}

/* One block per tracked product: its game's emoji and name, then the
   three states in a row. Two products fit a phone screen without
   scrolling, which is the whole point of listing them under the store. */
.tcg-reportlist { margin: var(--tcg-space-sm) 0; }

.tcg-reportrow + .tcg-reportrow {
  margin-top: var(--tcg-space-sm);
  padding-top: var(--tcg-space-sm);
  border-top: 1px solid var(--tcg-color-border);
}

.tcg-reportrow__title {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-xs);
  margin: 0;
  font-size: var(--tcg-fs-base);
  min-width: 0;
}

.tcg-reportrow__icon { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }

.tcg-states {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tcg-space-xs);
  margin: var(--tcg-space-xs) 0;
}

.tcg-state {
  font: inherit;
  font-weight: 700;
  font-size: var(--tcg-fs-sm, 0.875rem);
  padding: var(--tcg-space-sm) 2px;
  border: 0;
  border-radius: var(--tcg-radius-md, 10px);
  color: #fff;
  cursor: pointer;
  min-width: 0;
}

.tcg-state small {
  display: block;
  font-weight: 400;
  font-size: var(--tcg-fs-xs, 0.75rem);
  opacity: 0.9;
}

.tcg-state--in_stock    { background: var(--tcg-color-open-fg); }
.tcg-state--sold_out    { background: var(--tcg-color-urgent-fg); }
.tcg-state--not_yet     { background: var(--tcg-color-waiting-fg); }
.tcg-state[disabled]    { opacity: 0.5; cursor: wait; }

/* The optional time, folded: an open field under the buttons read as part
   of the tap. */
.tcg-optional { margin: var(--tcg-space-sm) 0; }
.tcg-optional summary {
  cursor: pointer;
  font-size: var(--tcg-fs-sm, 0.875rem);
  color: var(--tcg-color-text-muted);
}

/* Two taps to close a store: the first arms the button, the second acts.
   No browser confirm() - iOS dropped it silently on the owner's phone. */
.tcg-btn--danger.is-armed {
  background: var(--tcg-color-urgent-fg);
  border-color: var(--tcg-color-urgent-fg);
  color: #fff;
}

/* --- the map's staff sheet -------------------------------------------- */

.tcg-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--tcg-space-sm) var(--tcg-space-md) max(var(--tcg-space-md), env(safe-area-inset-bottom));
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  border-top: 1px solid var(--tcg-color-border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

@media (min-width: 700px) {
  .tcg-sheet {
    left: 50%;
    right: auto;
    width: 32rem;
    transform: translateX(-50%);
  }
}

.tcg-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--tcg-space-sm);
  margin-bottom: var(--tcg-space-xs);
}

.tcg-sheet__titles { flex: 1 1 auto; min-width: 0; }
.tcg-sheet__titles b { display: block; font-size: var(--tcg-fs-lg, 1.125rem); }
.tcg-sheet__titles .tcg-stock__status { margin: 0; }

.tcg-sheet__close {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid var(--tcg-color-border);
  border-radius: 50%;
  background: var(--tcg-color-surface);
  color: var(--tcg-color-text);
  cursor: pointer;
}

.tcg-result {
  padding: var(--tcg-space-xs) var(--tcg-space-sm);
  border: 1px solid var(--tcg-color-open-bd);
  background: var(--tcg-color-open-bg);
  border-radius: var(--tcg-radius-md, 10px);
  margin: var(--tcg-space-xs) 0;
  display: flex;
  gap: var(--tcg-space-xs);
  flex-wrap: wrap;
  align-items: center;
}

.tcg-result__text { flex: 1 1 auto; margin: 0; font-weight: 700; font-size: var(--tcg-fs-sm, 0.875rem); }

/* 「自分の報告」: one line per report of the last hour, 取り消す on each. */
.tcg-minelist { list-style: none; margin: 0; padding: 0; }

.tcg-mineline {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-xs);
  padding: var(--tcg-space-xs) 0;
  border-top: 1px solid var(--tcg-color-border);
  font-size: var(--tcg-fs-sm, 0.875rem);
}

.tcg-mineline__text { flex: 1 1 auto; min-width: 0; }
.tcg-mineline .tcg-btn { flex: 0 0 auto; margin: 0; white-space: nowrap; }

.tcg-btn + .tcg-btn { margin-top: var(--tcg-space-xs); }