/* ═══════════════════════════════════════════════════════════
   panels.css — Public map panels + weld feed (public mode)
   ═══════════════════════════════════════════════════════════ */

/* ── Panel grid ── */
#panels {
  display:    flex;
  flex:       1;
  overflow:   hidden;
  gap:        1px;
  background: var(--bg-gap);
}

.panel {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  background:      var(--bg-void);
  overflow:        hidden;
}

.panel-header {
  padding:         var(--pad-sm) 14px;
  background:      var(--bg-surface);
  border-bottom:   var(--border-dim);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
}

.panel-title {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--green);
}

.panel-count       { font-size: 0.7rem; color: var(--text-secondary); }
.panel-count span  { color: var(--amber); }

/* ── Leaflet map containers ── */
#map-akl,
#map-wlg { flex: 1; }

/* ── Leaflet tooltip override ── */
.leaflet-tooltip {
  background:   var(--bg-surface);
  border:       var(--border-dim);
  color:        var(--green);
  font-family:  var(--font-mono);
  font-size:    0.65rem;
  padding:      3px 6px;
  border-radius: 0;
  box-shadow:   none;
}

/* ── Weld feed panel ── */
#weld-feed {
  flex:       1;
  overflow-y: auto;
  padding:    var(--pad-sm);
}

.weld-row {
  padding:       6px var(--pad-sm);
  border-bottom: 1px solid var(--bg-surface);
  font-size:     0.68rem;
  animation:     fadeIn 0.3s ease;
}

.weld-row .weld-id    { color: var(--text-secondary); }
.weld-row .weld-hash  { color: var(--green); font-size: 0.65rem; }
.weld-row .weld-term  { color: var(--amber); }
.weld-row .weld-time  { color: #444; float: right; }
.weld-row .weld-count { color: #ffffff; }

/* ═══════════════════════════════════════════════════════════
   CHAIN BUILDER — Modal styles
   ═══════════════════════════════════════════════════════════ */

/* Progress bar */
.e7_chain_progress {
  height:           3px;
  background:       rgba(0, 200, 150, 0.15);
  border-radius:    2px;
  margin-bottom:    20px;
  overflow:         hidden;
}
.e7_chain_progress_fill {
  height:           100%;
  background:       #00c896;
  border-radius:    2px;
  transition:       width 0.4s ease;
}

/* Header row */
.e7_chain_header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  margin-bottom:    16px;
}
.e7_chain_step_num {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            22px;
  height:           22px;
  border-radius:    50%;
  background:       #00c896;
  color:            #0a0f1e;
  font-size:        0.7rem;
  font-weight:      700;
  margin-right:     8px;
  flex-shrink:      0;
}
.e7_chain_step_label {
  font-size:        0.65rem;
  color:            #555;
  letter-spacing:   1.5px;
  text-transform:   uppercase;
}
.e7_chain_close_btn {
  background:       transparent;
  border:           none;
  color:            #555;
  font-size:        1rem;
  cursor:           pointer;
  padding:          4px 8px;
  line-height:      1;
  transition:       color 0.2s;
}
.e7_chain_close_btn:hover { color: #fff; }

/* Title */
.e7_chain_title {
  font-size:        1.1rem;
  color:            #f0f4ff;
  margin-bottom:    20px;
  font-family:      var(--font-serif, serif);
}
.e7_chain_subtitle {
  font-size:        0.75rem;
  color:            #888;
  margin-bottom:    16px;
}

/* Use-case option grid */
.e7_chain_options_grid {
  display:          grid;
  grid-template-columns: repeat(3, 1fr);
  gap:              10px;
  margin-bottom:    24px;
}
.e7_chain_option {
  border:           1px solid rgba(0, 200, 150, 0.15);
  background:       rgba(0, 200, 150, 0.03);
  padding:          14px 10px;
  cursor:           pointer;
  text-align:       center;
  transition:       border-color 0.2s, background 0.2s;
  border-radius:    2px;
}
.e7_chain_option:hover {
  border-color:     rgba(0, 200, 150, 0.4);
  background:       rgba(0, 200, 150, 0.07);
}
.e7_chain_option_selected {
  border-color:     #00c896 !important;
  background:       rgba(0, 200, 150, 0.12) !important;
}
.e7_chain_option_icon  { font-size: 1.4rem; margin-bottom: 6px; }
.e7_chain_option_label { font-size: 0.72rem; color: #f0f4ff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.e7_chain_option_desc  { font-size: 0.62rem; color: #555; }

/* Form fields */
.e7_chain_fields {
  display:          flex;
  flex-direction:   column;
  gap:              12px;
  margin-bottom:    24px;
}
.e7_chain_field_row {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              10px;
}
.e7_chain_field_group {
  display:          flex;
  flex-direction:   column;
  gap:              4px;
}
.e7_chain_label {
  font-size:        0.62rem;
  color:            #555;
  text-transform:   uppercase;
  letter-spacing:   1px;
}
.e7_chain_input {
  background:       rgba(255,255,255,0.04);
  border:           1px solid rgba(0,200,150,0.2);
  color:            #f0f4ff;
  font-family:      var(--font-mono, monospace);
  font-size:        0.72rem;
  padding:          8px 10px;
  outline:          none;
  width:            100%;
  box-sizing:       border-box;
  transition:       border-color 0.2s;
}
.e7_chain_input:focus {
  border-color:     #00c896;
}
.e7_chain_textarea {
  resize:           vertical;
  min-height:       72px;
}
select.e7_chain_input option {
  background:       #0a0f1e;
  color:            #f0f4ff;
}

/* Bond cards */
.e7_chain_bond_list {
  display:          flex;
  flex-direction:   column;
  gap:              10px;
  margin-bottom:    20px;
}
.e7_chain_bond_card {
  display:          flex;
  align-items:      flex-start;
  gap:              12px;
  border:           1px solid rgba(0,200,150,0.15);
  background:       rgba(0,200,150,0.03);
  padding:          12px 14px;
  border-radius:    2px;
}
.e7_chain_bond_num {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            24px;
  height:           24px;
  border-radius:    50%;
  border:           1px solid rgba(0,200,150,0.4);
  color:            #00c896;
  font-size:        0.65rem;
  font-weight:      700;
  flex-shrink:      0;
  margin-top:       2px;
}
.e7_chain_bond_info {
  flex:             1;
  min-width:        0;
}
.e7_chain_bond_title {
  font-size:        0.78rem;
  color:            #f0f4ff;
  margin-bottom:    4px;
}
.e7_chain_bond_desc {
  font-size:        0.68rem;
  color:            #888;
  line-height:      1.4;
}
.e7_chain_bond_meta {
  display:          flex;
  flex-direction:   column;
  align-items:      flex-end;
  gap:              4px;
  flex-shrink:      0;
}
.e7_chain_plane_badge {
  background:       rgba(0,200,150,0.15);
  color:            #00c896;
  font-size:        0.6rem;
  padding:          2px 6px;
  letter-spacing:   1px;
  border-radius:    2px;
}
.e7_chain_plane_label {
  font-size:        0.6rem;
  color:            #555;
}
.e7_chain_bond_cost {
  font-size:        0.7rem;
  color:            #f0f4ff;
}

/* Verify URL */
.e7_chain_verify_url {
  font-size:        0.65rem;
  color:            #00c896;
  cursor:           pointer;
  word-break:       break-all;
  margin-top:       4px;
  text-decoration:  underline;
  text-underline-offset: 2px;
}
.e7_chain_verify_url:hover {
  color:            #fff;
}

/* Total cost row */
.e7_chain_total {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  border-top:       1px solid rgba(0,200,150,0.15);
  padding-top:      12px;
  margin-bottom:    20px;
}
.e7_chain_total_label {
  font-size:        0.65rem;
  color:            #555;
  text-transform:   uppercase;
  letter-spacing:   1px;
}
.e7_chain_total_value {
  font-size:        0.9rem;
  color:            #00c896;
}

/* Footer buttons */
.e7_chain_footer {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  gap:              10px;
  margin-top:       4px;
}
.e7_chain_btn_primary {
  background:       #00c896;
  color:            #0a0f1e;
  border:           none;
  font-family:      var(--font-mono, monospace);
  font-size:        0.7rem;
  font-weight:      700;
  letter-spacing:   1.5px;
  padding:          10px 20px;
  cursor:           pointer;
  text-transform:   uppercase;
  transition:       background 0.2s, opacity 0.2s;
}
.e7_chain_btn_primary:hover    { background: #00e6ad; }
.e7_chain_btn_primary:disabled { opacity: 0.35; cursor: not-allowed; }
.e7_chain_btn_secondary {
  background:       transparent;
  color:            #555;
  border:           1px solid rgba(0,200,150,0.2);
  font-family:      var(--font-mono, monospace);
  font-size:        0.7rem;
  letter-spacing:   1.5px;
  padding:          10px 20px;
  cursor:           pointer;
  text-transform:   uppercase;
  transition:       color 0.2s, border-color 0.2s;
}
.e7_chain_btn_secondary:hover {
  color:            #f0f4ff;
  border-color:     rgba(0,200,150,0.5);
}

/* Loading spinner */
.e7_chain_loading {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              16px;
  padding:          32px 0;
}
.e7_chain_loading_text {
  font-size:        0.7rem;
  color:            #555;
  letter-spacing:   1px;
}
.e7_chain_spinner {
  width:            28px;
  height:           28px;
  border:           2px solid rgba(0,200,150,0.15);
  border-top-color: #00c896;
  border-radius:    50%;
  animation:        e7spin 0.8s linear infinite;
}
@keyframes e7spin {
  to { transform: rotate(360deg); }
}