/* Modals */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:10px;
  background:rgba(0,0,0,.85);
  z-index:40;
}

.modal[hidden]{
  display:none !important;
  pointer-events:none;
}

.modalCard{
  width:min(640px, 96vw);
  border:1px solid var(--line);
  border-radius:0;
  background:#05080d;
  overflow:hidden;
}

.modalHeader,
.modalFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:9px 10px;
}

.modalHeader{ border-bottom:1px solid var(--line-soft); }

.modalFooter{
  justify-content:flex-end;
  border-top:1px solid var(--line-soft);
}

.modalTitle{
  font-family:"Eurostile", "Bahnschrift", sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.modalBody{
  padding:10px;
  color:rgba(255,255,255,.88);
}

.setupCard,
.confirmCard{
  width:min(420px, 94vw);
  border-color:rgba(255,255,255,.24);
  background:
    radial-gradient(120% 160% at 0 0, rgba(255,255,255,.05), transparent 55%),
    #010101;
  box-shadow:0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}

.confirmBody,
.setupBody{
  display:grid;
  gap:8px;
}

.confirmText{
  margin:0;
  color:rgba(255,255,255,.84);
  font-size:12px;
  line-height:1.4;
}

.setupText{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:11px;
  line-height:1.35;
}

.setupField{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.66);
}

.setupPicker{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.humanPick{
  --pick-rgb:255,255,255;
  appearance:none;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.36);
  cursor:pointer;
  min-height:58px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  padding:8px 9px;
  align-items:center;
  justify-content:flex-start;
  transition:border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease);
}

.setupPicker .humanPick:nth-child(1){ --pick-rgb:var(--p0-rgb); }
.setupPicker .humanPick:nth-child(2){ --pick-rgb:var(--p1-rgb); }
.setupPicker .humanPick:nth-child(3){ --pick-rgb:var(--p2-rgb); }
.setupPicker .humanPick:nth-child(4){ --pick-rgb:var(--p3-rgb); }

.humanPick:hover{
  border-color:rgba(var(--pick-rgb), .55);
  color:rgba(var(--pick-rgb), .92);
  background:rgba(var(--pick-rgb), .08);
  transform:translateY(-1px);
}

.humanPick:active{ transform:translateY(0) scale(.985); }

.humanPick .pickGlyph{
  width:24px;
  height:24px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.humanPick .glyph-bot{ display:none; }
.humanPick:not(.is-active) .glyph-human{ display:none; }
.humanPick:not(.is-active) .glyph-bot{ display:block; }

.pickMeta{
  min-width:0;
  display:grid;
  gap:2px;
  justify-items:start;
}

.pickColor{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

.pickMode{
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:currentColor;
  opacity:.9;
}

.humanPick.is-active{
  border-color:rgba(var(--pick-rgb), .84);
  color:rgba(var(--pick-rgb), 1);
  background:rgba(var(--pick-rgb), .14);
  box-shadow:0 0 0 1px rgba(var(--pick-rgb), .4), 0 0 26px -12px rgba(var(--pick-rgb), .95);
}

.setupSummary{
  margin-top:2px;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.88);
}

.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--line-soft);
}

.table th,
.table td{
  padding:6px 7px;
  text-align:left;
  font-size:10px;
}

.table th{
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  letter-spacing:.1em;
}

.table tr:nth-child(odd) td{ background:rgba(255,255,255,.01); }
.table tr:nth-child(even) td{ background:rgba(255,255,255,.03); }