/* ============================================================
   Portal, cross chain slab transfer. Every rule here is prefixed
   pt- or scoped inside one. This sheet loads after app.css, so a
   plain rule here outranks a media query there; nothing below
   restates a shared component.

   The wireframe ground has to stay visible through this page, so
   no surface here paints an opaque fill. Depth is the panel blur,
   the inset highlight, and the shadow, all from tokens.
   ============================================================ */

.pt-page { padding-bottom: 40px; }
.pt-head { padding-bottom: 20px; }

/* ---------- wrong network banner ---------- */
.pt-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 16px;
  border-color: oklch(from var(--warning) l c h / 0.4);
}
.pt-banner-ico {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
  color: var(--warning);
}
.pt-banner-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
}
.pt-banner-text strong { font-size: 13px; letter-spacing: 0.01em; }
.pt-banner-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ---------- layout ---------- */
.pt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.pt-panel { padding: 18px; }
.pt-rule { margin: 20px 0 18px; background: var(--glass-border); }

/* ---------- chain selectors ---------- */
.pt-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.pt-chain {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 13px 11px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-faint);
}
.pt-chain-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pt-mark { display: inline-flex; flex: none; }
.pt-mark svg { border-radius: 8px; }
.pt-mark.sm svg { border-radius: 7px; }
.pt-mark.xs svg { border-radius: 5px; }
.pt-chain-note {
  font-size: 11.5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 9px 30px 9px 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  background-color: var(--glass-bg);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
}
.pt-select:hover { border-color: var(--muted-fg); }
.pt-select option { background: var(--elev); color: var(--fg); }

.pt-swap-cell { display: flex; align-items: center; justify-content: center; padding-bottom: 24px; }
.pt-swap svg { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pt-swap.spun svg { transform: rotate(180deg); }

/* ---------- slab picker ---------- */
.pt-pick-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pt-pick-count { display: block; font-size: 12.5px; margin-top: 3px; }
.pt-pick-actions { display: flex; gap: 8px; }

.pt-slabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
}
.pt-pick-empty { grid-column: 1 / -1; padding: 34px 16px; }
.pt-pick-empty p { margin: 0; max-width: 34ch; }

.pt-tile {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 9px 9px 10px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-faint);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.pt-tile:hover { border-color: var(--muted-fg); transform: translateY(-2px); }
.pt-tile[aria-pressed="true"] {
  border-color: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary-soft), 0 10px 26px oklch(from var(--primary) l c h / 0.24);
}
.pt-tile-art { display: block; }
.pt-tile-art .sl-slab { margin: 0 auto; }
.pt-tile-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted-fg);
}
.pt-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  color: var(--primary-fg);
  background: var(--primary-grad);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.pt-tile[aria-pressed="true"] .pt-tick { opacity: 1; transform: none; }

/* ---------- summary ---------- */
.pt-side { min-width: 0; }
.pt-summary { padding: 18px; position: sticky; top: calc(var(--header-h) + 14px); }
.pt-sum-title { margin: 0 0 14px; }
.pt-sum-body { display: grid; gap: 14px; }

.pt-sum-route {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-faint);
  font-size: 13.5px;
  font-weight: 600;
}
.pt-sum-chain { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pt-sum-arrow { display: inline-flex; margin-inline: auto; color: var(--muted-fg); }

.pt-sum-rows { display: grid; gap: 8px; font-size: 13px; }
.pt-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pt-sum-row .mono { font-size: 12.5px; }

.pt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--glass-border);
}
.pt-total-fig { font-size: 30px; line-height: 1; }

.pt-eta {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-faint);
}
.pt-eta-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pt-eta-fig { font-size: 19px; line-height: 1.1; }
.pt-eta p { margin: 0; font-size: 12px; line-height: 1.5; }

.pt-sum-note { margin: 0; font-size: 11.5px; line-height: 1.5; }
.pt-go { margin-top: 16px; }
.pt-reason { margin: 9px 0 0; font-size: 12px; text-align: center; }

/* ---------- progress modal ---------- */
.pt-run { padding: 24px 22px 20px; }
.pt-run .display { margin: 4px 0 18px; }
.pt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pt-step {
  display: flex;
  gap: 12px;
  padding: 10px 11px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  opacity: 0.42;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.pt-step[data-state="live"] {
  opacity: 1;
  background: var(--glass-bg-faint);
  border-color: var(--glass-border);
}
.pt-step[data-state="done"] { opacity: 1; }
.pt-step-dot {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-fg);
}
.pt-step[data-state="live"] .pt-step-dot {
  border-color: var(--primary-soft);
  border-top-color: transparent;
  animation: pt-spin 0.7s linear infinite;
}
.pt-step[data-state="done"] .pt-step-dot { border-color: transparent; background: var(--primary-grad); }
.pt-step-tick { display: inline-flex; opacity: 0; transition: opacity 0.18s ease; }
.pt-step[data-state="done"] .pt-step-tick { opacity: 1; }
.pt-step-body { display: grid; gap: 1px; min-width: 0; }
.pt-step-name { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }
.pt-step-line { font-size: 12px; line-height: 1.45; }
.pt-run-note { margin: 16px 0 0; font-size: 11.5px; }

@keyframes pt-spin { to { transform: rotate(360deg); } }

/* ---------- history ---------- */
.pt-hist { margin-top: 26px; }
.pt-hist-sub { font-size: 12px; }
.pt-hwrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-fg);
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.pt-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--glass-border); vertical-align: middle; }
.pt-table tr:last-child td { border-bottom: 0; }
.pt-table th:last-child, .pt-table td:last-child { padding-right: 0; text-align: right; }
.pt-hist-slab { display: inline-flex; align-items: center; gap: 7px; }
.pt-hist-route { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pt-hist-arrow { display: inline-flex; color: var(--muted-fg); margin-inline: 2px; }
.pt-hist-eta { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; }
.pt-hist-badge[data-state="live"] { border-color: oklch(from var(--warning) l c h / 0.45); color: var(--warning); }
.pt-hist-badge[data-state="done"] { border-color: oklch(from var(--success) l c h / 0.45); color: var(--success); }
.pt-hist-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; }

.pt-locked { padding: 8px; }
.pt-locked .empty-state p { margin: 0; max-width: 46ch; }
.pt-locked .btn { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-summary { position: static; }
}

/* The two selectors stack, and the swap control turns to point down the
   column it now sits in. */
@media (max-width: 720px) {
  .pt-route { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pt-swap-cell { padding: 0; }
  .pt-swap svg { transform: rotate(90deg); }
  .pt-swap.spun svg { transform: rotate(270deg); }
}

@media (max-width: 620px) {
  .pt-panel { padding: 14px; }
  .pt-summary { padding: 15px; }
  .pt-slabs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .pt-banner { flex-wrap: wrap; }
  .pt-banner-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .pt-total-fig { font-size: 26px; }

  /* The table becomes one stacked block per transfer. Nothing scrolls
     sideways at 375px, and every cell keeps its label. */
  .pt-hwrap { overflow-x: visible; }
  .pt-table, .pt-table tbody, .pt-table tr, .pt-table td { display: block; width: 100%; }
  .pt-table thead { display: none; }
  .pt-table tr {
    padding: 11px 12px;
    margin-bottom: 9px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg-faint);
  }
  .pt-table tr:last-child { margin-bottom: 0; }
  .pt-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
  }
  .pt-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-fg);
  }
  .pt-table td:last-child { padding-right: 0; }
  .pt-hist-eta { flex-wrap: wrap; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-tile, .pt-tick, .pt-swap svg, .pt-step { transition: none; }
  .pt-tile:hover { transform: none; }
  .pt-step[data-state="live"] .pt-step-dot { animation: none; border-top-color: var(--primary-soft); }
}

@media (prefers-reduced-transparency: reduce) {
  .pt-chain, .pt-tile, .pt-sum-route, .pt-eta, .pt-table tr { background: var(--muted); }
  .pt-select { background-color: var(--input); }
}