/* =====================================================================================================================
   Warp terminal window (js/ui/pages/warp.js, id 'warp', layout 'single'). Page agent P-MISC-B. wp- prefix.
   A header row (title, intro, the pilot's level) and a grid of destination cards: terrain plate + sector index + kind,
   map name, level range (Oxanium), fit tag, [วาร์ป]. The current map is dimmed with "คุณอยู่ที่นี่".
   ===================================================================================================================== */

.wp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.wp-top {
  flex: none;
}
.wp-top .ghead {
  margin-bottom: calc(6 * var(--u));
}
.wp-intro {
  margin: 0 0 calc(14 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
}
.wp-mylv .gch-pre {
  font-size: var(--fs-label);
  color: var(--dim);
  margin-right: calc(6 * var(--u));
}
.wp-scroll {
  container-type: inline-size;
  padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
}
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(14 * var(--u));
  padding: calc(4 * var(--u));
}
@container (max-width: 900px) {
  .wp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 520px) {
  .wp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.gcard.wp-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.wp-art {
  position: relative;
  aspect-ratio: 8 / 3;
  overflow: hidden;
  background: var(--bg);
}
.wp-plate {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-idx {
  position: absolute;
  top: calc(8 * var(--u));
  left: calc(10 * var(--u));
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  background: rgba(4, 7, 8, 0.72);
  box-shadow: inset 2px 0 0 var(--accent);
}
.wp-kind {
  position: absolute;
  top: calc(8 * var(--u));
  right: calc(10 * var(--u));
}
.wp-here {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u));
  font: 600 var(--fs-sm) / 1.2 var(--f-head);
  color: var(--accent-ink);
  background: var(--accent);
}
.wp-here .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.wp-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name lv" "row row";
  align-items: end;
  gap: calc(8 * var(--u)) calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
}
.wp-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.wp-name h3 {
  margin: 0;
  font: 700 var(--fs-xl) / 1.2 var(--f-head);
  color: var(--text);
}
.wp-lv {
  grid-area: lv;
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  justify-self: end;
}
.wp-lvk {
  font: 600 var(--fs-xs) / 1 var(--f-head);
  letter-spacing: 0.12em;
  color: var(--dim);
}
.wp-lv b {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.wp-town {
  font-size: var(--fs-sm);
  color: var(--dim);
  text-align: right;
  max-width: calc(180 * var(--u));
}
.wp-row {
  grid-area: row;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
}
.wp-fit.k-good {
  --bd: var(--good);
  color: var(--good);
}
.wp-fit.k-dim {
  color: var(--faint);
}
.wp-fit .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.wp-go {
  flex: none;
  min-width: calc(120 * var(--u));
}
.wp-card.is-here {
  --bd: var(--accent-dim);
}
.wp-card.is-here .wp-plate {
  filter: saturate(0.5) brightness(0.8);
}
.wp-card.is-hard {
  --bd: color-mix(in srgb, var(--danger) 55%, var(--line));
}

/* tiers: on phones a card is a row (terrain plate left, details right) so three rows of two fit in view */
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-top .ghead {
  margin-bottom: calc(2 * var(--u));
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-intro {
  margin-bottom: calc(8 * var(--u));
}
html:is([data-tier="phone"], [data-orient="portrait"]) .gcard.wp-card {
  flex-direction: row;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-art {
  flex: none;
  width: 34%;
  aspect-ratio: auto;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-kind,
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-name .g-eyebrow,
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-town {
  display: none;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-here {
  font-size: var(--fs-label);
  padding: calc(3 * var(--u));
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  gap: calc(4 * var(--u)) calc(8 * var(--u));
  align-items: center;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-row {
  padding-top: calc(6 * var(--u));
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-fit {
  min-width: 0;
  overflow: hidden;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-grid {
  gap: calc(8 * var(--u));
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-name h3 {
  font-size: var(--fs-lg);
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-lv b {
  font-size: var(--fs-xl);
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-go {
  min-width: calc(96 * var(--u));
}
html[data-orient="portrait"] .wp-grid {
  grid-template-columns: minmax(0, 1fr);
}
html[data-orient="portrait"] .wp-art {
  width: 30%;
}
html[data-orient="portrait"] .wp-go {
  min-width: 0;
}
html[data-orient="portrait"] .wp-row .gk-spacer {
  flex: 1 1 0;
}

/* 2026-10-09 review: the level-fit tag keeps its whole Thai word ('เขตปลอดภัย' was clipped to 'เขตปลอดภั' at
   390x844); the warp button gives up the width instead */
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-fit {
  flex: none;
  min-width: max-content;
  overflow: visible;
  white-space: nowrap;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .wp-row > .gbtn {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: calc(10 * var(--u));
}