/* ===== profile node list, show-nodes switch, view-mode switcher ===== */

.node-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:var(--space-4);
}
.node-count{ font-size:var(--text-xs); color:var(--text-muted); font-variant-numeric:tabular-nums; }

.switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--text-sm); }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-track{
  position:relative; width:30px; height:18px; border-radius:var(--radius-pill);
  background:var(--track-bg); border:1px solid var(--field-border, #2a343c);
  transition:background-color 160ms ease, border-color 160ms ease;
}
.switch-track::after{
  content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:#9fb4c2;
  transition:transform 180ms var(--ease-out), background-color 160ms ease;
}
.switch input:checked + .switch-track{ background:var(--accent-soft); border-color:rgba(88,196,255,0.55); }
.switch input:checked + .switch-track::after{ transform:translateX(12px); background:var(--accent); }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--accent); outline-offset:2px; }
.switch:active .switch-track::after{ width:15px; }
.switch input:checked:active + .switch-track::after{ transform:translateX(9px); }

.node-head-labels, .node-row{
  display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 26px; column-gap:8px;
}
.node-head-labels{
  margin-top:var(--space-3); padding:0 9px;
  font-size:10.5px; color:var(--text-muted); letter-spacing:.02em;
}
.node-head-labels span:nth-child(2), .node-head-labels span:nth-child(3){ padding-left:4px; }

.node-list{ display:flex; flex-direction:column; gap:6px; margin-top:4px; margin-bottom:var(--space-3); }

.node-row{
  align-items:center; row-gap:0; padding:8px 9px 4px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:border-color 140ms ease, background-color 140ms ease, box-shadow 180ms ease;
}
@media (hover:hover) and (pointer:fine){
  .node-row:not(.selected):hover{ border-color:var(--border-strong); }
}
/* same highlight as the light-blue plate in the 3D view */
.node-row.selected{
  border-color:rgba(88,196,255,0.7); background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(88,196,255,0.14);
}

.node-badge{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--border-strong);
  background:transparent; color:var(--text-muted); font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out);
}
.node-badge:active{ transform:scale(0.92); }
.node-row.selected .node-badge{ background:var(--accent); color:var(--accent-contrast); border-color:transparent; }

.node-cell{ display:flex; align-items:center; gap:4px; min-width:0; }
.node-cell .unit{ font-size:var(--text-xs); color:var(--text-muted); }
.node-num{
  width:100%; min-width:0; background:var(--input-bg); border:1px solid var(--field-border, #2a343c);
  border-radius:var(--radius-sm); padding:5px 8px; font-size:var(--text-sm); font-weight:600;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield;
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.node-num::-webkit-outer-spin-button, .node-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.node-num:hover{ border-color:var(--accent); }
.node-num:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(88,196,255,0.28); }

.node-locked{
  display:flex; align-items:center; gap:6px; width:100%; min-width:0;
  padding:5px 8px; border-radius:var(--radius-sm);
  border:1px dashed var(--field-border, #2a343c); color:var(--text-muted);
  font-size:var(--text-sm); font-variant-numeric:tabular-nums; cursor:default;
}
.node-locked svg{ flex:0 0 auto; margin-left:auto; opacity:.8; }
.node-locked-name{ font-size:var(--text-xs); }
.node-locked-val{ color:var(--text); font-weight:600; white-space:nowrap; }

.node-del{
  width:24px; height:24px; border-radius:50%; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out);
}
.node-del[hidden]{ display:block; visibility:hidden; }
.node-del:active{ transform:scale(0.9); }
@media (hover:hover) and (pointer:fine){
  .node-del:hover{ background:var(--danger-bg); color:var(--danger); }
}
.node-range{ grid-column:2 / 4; height:24px; }

#btnAddNode{ margin-top:0; }
#btnAddNode:disabled{ opacity:.45; cursor:not-allowed; }
#btnAddNode:disabled:active{ transform:none; }

/* view-mode switcher in the viewport */
.view-modes{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:2px; padding:3px; border-radius:var(--radius-pill);
  background:rgba(5,8,10,0.6); border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.view-modes button{
  border:none; background:transparent; color:var(--text-muted); cursor:pointer;
  font-size:var(--text-sm); font-weight:600; padding:5px 12px; border-radius:var(--radius-pill);
  transition:background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.view-modes button:active{ transform:scale(0.96); }
.view-modes button.active{ background:var(--accent); color:var(--accent-contrast); }
@media (hover:hover) and (pointer:fine){
  .view-modes button:not(.active):hover{ color:var(--text); background:rgba(255,255,255,0.08); }
}
@media (max-width: 640px){
  .view-modes{ top:54px; left:14px; transform:none; }
  .view-modes button{ padding:5px 10px; }
}

/* on phones the export block scrolls with the panel instead of covering it */
@media (max-width: 860px){
  .panel-footer{ position:static; box-shadow:none; }
}